AngularJS: Jak kierować określoną dyrektywę z wieloma instancjami

Question

Mam wiele wystąpień dyrektywy i chcę kierować tylko na określone wystąpienie. Na przykład w poniższym kodzie, jak mogę upewnić się, że div z class="one" jest jedynym, który zostanie wywołany przez zdarzenie $rootScope.$broadcast('myEvent').

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

Trzeba zrobić ten test w swojej obsługi zdarzenia:

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

Następnie dodać parametry w $ audycji

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

Answer 2

Można zdefiniować nowy atrybut dla tej dyrektywy, która odwołuje się do wywołania zwrotnego, który następnie jest wykonywany wewnątrz zwrotnego od $ na:

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

HTML deklaracja:

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

W swoim zakresem Kontroler:

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

Czytaj więcej na ten temat tutaj: http://docs.angularjs.org/guide/directive (sekcja „D DYREKTYWY Definicja obiektu ")

Answer 3

można użyć identyfikator zamiast klasy

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

aw kontrolerze

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

a następnie zamiast transmisji,

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