1

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

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

<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"]);

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

4

1 回答 1

0

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

https://docs.angularjs.org/api/ng/service/ $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>
于 2015-04-30T20:11:56.417 回答