Javascript Angularjs指令中$eval执行函数的替代方法

我有一个自定义元素指令，它显示用户的图片和名称，可以使用许多不同的配置属性。uc on hover属性可以使用一个函数来确定当用户将鼠标悬停在DOM元素上时要显示的元素。目前，该函数的逻辑位于angular服务中定义的$rootScope上。指令逻辑执行$evalattr['ucOnHover']以在$rootScope上执行函数。虽然这个模式目前运行良好，但我担心它太复杂，$rootScope可能会变得笨拙。我是否可以改变解决方案设计，同时仍然关注指令和服务关注点的分离，并制定灵活的解决方案

视图上下文中的“我的自定义元素”指令：

<user-card locator="{{ Item.Author }}" uc-on-hover="$root.namespace.displayFloatingContainer()"></user-card>

该指令通过以下方式调用$rootScope上的函数：

$scope.$eval(attrs["ucOnHover"]);

---

对此设计的任何帮助都将不胜感激。

您可以使用$parse，并在指令范围内运行该函数

$parse

您的服务可以被注入到定义了您正在执行的函数的任何地方，并从您正在运行的函数中调用

下面是uc on hover指令的基本框架，该指令触发作为参数数组一部分传入的函数

(function() {

angular
  .module('yourModuleName')
  .directive('ucOnHover', ucOnHover);

ucOnHover.$inject = ['$parse'];

function ucOnHover($parse) {

var directive = {
  restrict: 'A',
  link: link
}

return directive;

function link(scope, element, attrs) {

  var args = attrs['ucOnHover'].split(' ');

  var hoverFunctions = [];

  angular.forEach(args, function(hoverFunc) {
      hoverFunctions.push($parse(hoverFunc));
  });

  element.on('hover', function(event) {
    event.preventDefault();
    event.stopPropagation();
    scope.$apply(function() {
      angular.forEach(hoverFunctions, function(hoverFn) {
         hoverFn(scope);
       });
    });
  });


}


}

})();

下面是模板中使用的相同指令

<user-card locator="{{ Item.Author }}" uc-on-hover="hoverFunction()"                                         ></user-card>

---

$scope.$applyattrs['ucOnHover']？用户卡指令是否使用隔离作用域？是的，用户卡指令使用隔离作用域。我尝试了@Baszz建议并收到错误：[$rootScope:inprog]$digest已在进行中。仅使用$scope时不会发生此情况。$evalattrs['ucOnHover']感谢您的响应。现在我已经在服务中定义了函数。我使用该服务作为组织在$rootScope上定义的相关功能的一种方式。签名示例：$rootScope.ngRestForm.displayFloatingContainer。这种组织方式的另一种选择是将服务外部的函数（如displayFloatingContainer）提取到可以从视图访问的全局对象。必须有一种更好的方法来组织我想要做的事情，同时让指令与displayFloatingContainer中的逻辑分离。顺便说一句，我很高兴知道我可以将提供程序注入到任何函数中。尽管它的使用频率是另一个讨论。

<user-card locator="{{ Item.Author }}" uc-on-hover="hoverFunction()"                                         ></user-card>