Question

我有一个指令的多个实例，我想仅针对特定实例。例如，在下面的代码中，如何确保class="one"的div是唯一由事件$rootScope.$broadcast('myEvent')触发的div。

JS：

myApp.directive('myDirective', function() {
    return {
        restrict: 'A',
        controller: function(scope, el, attrs) {
            scope.$on('myEvent', function() {
                el.css({left: '+=100'});
            });
        },
    };    
});

HTML：

<div my-directive class="one"></div>
<div my-directive class="two"></div>

Answer 1

您应该在事件处理程序中执行此操作：

myApp.directive('myDirective', function() {
  return {
    restrict: 'A',
      controller: function(scope, el, attrs) {
        scope.$on('myEvent', function(ev,args) {
          //do the check - you could provide a function, a value or something else
          if(el.hasClass(args.class)){
            el.css({left: '+=100'});
          }
        });
      },
  };    
});

然后在$ broadcast

中添加参数

$rootScope.$broadcast('myEvent',{class:'one'})

Answer 2

您可以为此指令定义一个新属性，该属性引用一个回调，该回调随后在$ on的回调中执行：

myApp.directive('myDirective', function() {
    return {
        restrict: 'A',
        scope: {
          callme: "="
        },
        controller: function(scope, el, attrs) {
            scope.$on('myEvent', function() {
                scope.callme(el)
            });
        },
    };    
});

HTML声明：

<div my-directive class="one" callme="functionDefinedInScope"></div>

在您的控制器范围内：

$scope.functionDefinedInScope = function(el) {
    el.css({left: '+=100'});
}

在这里阅读更多相关信息： http://docs.angularjs.org/guide/directive（“指令定义对象”一节）

Answer 3

你可以使用id而不是class

<div my-directive id="one"></div>
<div my-directive id="two"></div>

并在您的控制器中

controller: function(scope, el, attrs) {
   scope.moveElement = function() {
      el.css({left: '+=100'});
   }
}

然后代替广播，

angular.element('#one').scope().moveElement()

AngularJS：如何针对具有多个实例的特定指令

3 个答案: