AngularJS: come indirizzare una direttiva specifica con più istanze

Question

Ho più istanze di una direttiva e vorrei scegliere solo un'istanza specifica. Ad esempio nel codice qui sotto, come posso assicurarmi che il div con class="one" sia l'unico che viene attivato dall'evento $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

Si dovrebbe fare questo controllo nel vostro gestore di eventi:

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

quindi aggiungere i parametri nella $ trasmissione

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

Answer 2

Si potrebbe definire un nuovo attributo per questa direttiva, che fa riferimento a un callback che poi viene eseguito all'interno del callback di $ su:

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

HTML dichiarazione:

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

Nel vostro ambito Controller:

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

Ulteriori informazioni al riguardo: http://docs.angularjs.org/guide/directive (Sezione "D" DIRETTIVA definizione di oggetto ")

Answer 3

è possibile utilizzare id al posto di classe

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

e nel controllore

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

e allora invece di trasmissione,

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