I want to trigger an AngularJS custom directive that contains jQuery instructions. How can it be done? I have read about emit function in the directive?
ideas?
-
1stackoverflow.com/questions/16935095/…Ismael– Ismael2014-01-31 10:56:18 +00:00Commented Jan 31, 2014 at 10:56
Add a comment
|
1 Answer
You can use a service to communicate between the controller and the directive.
Service might look like this:
app.service("directiveService", function() {
var listeners = [];
return {
subscribe: function(callback) {
listeners.push(callback);
},
publish: function(msg) {
angular.forEach(listeners, function(value, key) {
value(msg);
});
}
};
});
And the directive could respond to the service:
app.directive("jQueryDirective", function(directiveService) {
directiveService.subscribe(function(msg) {
// pretend this is jQuery
document.getElementById("example")
.innerHTML = msg;
});
return {
restrict: 'E'
};
});
Just substitute what I did for jQuery manipulation and you should have what you need.
Here's a working fiddle: http://jsfiddle.net/jeremylikness/wqXYx/
2 Comments
Strawberry
What are the advantages of doing it this way over using the $broadcast/$on?
Jeremy Likness
Broadcast creates a dependency on $scope as well as on $scope hiearchy. If you rely on that you have a lot of listeners being called that may or not be interested in the message, while an explicit service only targets the components that need it. It also makes it easier to test and is reusable and self-contained.