AngularJS: Wie zielen Sie auf bestimmte Direktive mit mehreren Instanzen

Question

Ich habe mehrere Instanzen einer Direktive und ich möchte nur eine bestimmte Instanz gezielt. Zum Beispiel im Code unten, wie kann ich sicherstellen, dass das div mit class="one" das einzige ist, das durch das Ereignis $rootScope.$broadcast('myEvent') ausgelöst wird.

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

Sie diese Überprüfung in Ihrem Event-Handler tun sollten:

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'}); 
      } 
     }); 
     }, 
    };  
}); 

dann die Parameter in der Sendung $ hinzufügen

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

Answer 2

Sie könnten ein neues Attribut für diese Richtlinie definieren, die einen Rückruf verweist, die dann innerhalb des Rückrufs von $ auf ausgeführt wird:

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

HTML Erklärung:

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

In Ihrem Umfang Controller:

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

mehr das Lesen Sie hier: http://docs.angularjs.org/guide/directive (Abschnitt „D ichtlinie Definition Object ")

Answer 3

können Sie id statt Klasse

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

und in Ihrem Controller

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

und dann statt Sendung,

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