AngularJS: How to target specific directive with multiple instances - angularjs

Question

I have multiple instances of a directive and I would like to target a specific instance only. For example in the code below, how can I make sure that the div with class="one" is the only one that gets triggered by the event $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

You should do this check in your event handler:
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'});
}
});
},
};
});
Then add the parameters in the $broadcast
$rootScope.$broadcast('myEvent',{class:'one'})

Answer 2

You could define a new attribute for this directive which references a callback that then is executed inside the callback of $on:
myApp.directive('myDirective', function() {
return {
restrict: 'A',
scope: {
callme: "="
},
controller: function(scope, el, attrs) {
scope.$on('myEvent', function() {
scope.callme(el)
});
},
};
});
HTML declaration:
<div my-directive class="one" callme="functionDefinedInScope"></div>
In your Controller scope:
$scope.functionDefinedInScope = function(el) {
el.css({left: '+=100'});
}
Read more about this here:
http://docs.angularjs.org/guide/directive (Section "Directive Definition Object")

Answer 3

can you use id instead of class
<div my-directive id="one"></div>
<div my-directive id="two"></div>
and in your controller
controller: function(scope, el, attrs) {
scope.moveElement = function() {
el.css({left: '+=100'});
}
}
and then instead of broadcast,
angular.element('#one').scope().moveElement()