javascript - Angularjs 指令中 $eval 执行函数的替代方案

Question

我有一个自定义元素指令(显示用户的图片和姓名)，它可以采用许多不同的配置属性。 uc-on-hover 属性可以使用一个函数来确定当用户将鼠标悬停在 DOM 元素上时显示哪个元素。目前，该函数的逻辑位于 $rootScope(在 Angular 服务中定义)。指令逻辑执行 $eval(attr['ucOnHover']) 以在 $rootScope 上执行该函数。虽然这种模式目前效果很好，但我担心它太复杂并且 $rootScope 可能会变得难以使用。无论如何，我是否可以更改解决方案设计，同时仍然注意指令和服务的关注点分离并制定灵活的解决方案？

我在 View 上下文中的自定义元素指令:

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

定义$rootScope.namespace.displayFloatingContainer()的服务:

.service('uiElementService', ['$rootScope', function ($rootScope) {

    $rootScope.ngRestForm.displayFloatingContainer = function (code) {

            try {
                console.log('rootscope.uielementservice hit with code: ' + code);
                return true;
            } catch (err) {
            }
        return false;
        };       
}])
 .run(function (uiElementService) {
     console.log('uiElementService: Start');
 });

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

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

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

Answer 1

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

https://docs.angularjs.org/api/ng/service/ $解析

您的服务可以注入(inject)到定义您正在执行的函数的任何位置，并从您正在运行的函数调用。

这是 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>