Let's say I have a directive that has a method sayHelloWorld() that I want to call from the scope from which I'm using the directive. How could I do it?
Also, making the entire thing a little bit more difficult, how would I call that method of a specific directive if I had multiple directives in the same scope?
Plunkr showing what I want to do: http://plnkr.co/edit/E6OLgnqArBx8lrw6s894?p=preview
What you want to do is create a service that exposes your APIs, then inject the service where you need to use it (note, I'm typing this off my head, so there might be a syntax error here and there):
var app = angular.module('MyApp', []);
/**
* This service exposes one API method: saveDataToServer,
* which is a methods that takes a string, and saves it
* to some backend server.
*/
app.service('myService', function($http){
/**
* Save a string to some url.
*
* @param {string} str
* @return Promise
*/
this.saveDataToServer = function(str){
return $http.post('/url/here/', {str: str});
};
});
/**
* This directive uses the service above, and calls
* the service's API method inside its onAction method,
* which only this directive can access directly.
*/
app.directive('myDirective', function(){
return {
restrict: 'ea',
scope: {
},
templateUrl: '/my-template.html',
controller: function(myService){
/**
* This is a method that you can call from this
* directive's template.
*/
$scope.onAction = function(){
// Inside this method, make a call to the service
myService.saveDataToServer($scope.message).
then(function(res){
// data saved!
});
};
}
};
});
// The template (/my-template.html)
<div>
<input type="text" ng-model="message">
<button ng-click="onAction()">Save</button>
</div>
// Your main template (/index.html)
<my-directive></my-directive>
You could even reuse your service inside a different controller, and use the service without a directive:
app.controller('MyOtherController', function(myService){
$scope.onSomeAction = function(str){
myService.saveDataToServer(str).
then(function(res){
// data saved!
});
};
});
// Some template under the scope of MyOtherController
<div ng-controller="MyOtherController">
<button ng-click="onSomeAction('hello world')">Hello</button>
</div>
Now, if all you want is to check the data inside your directive from a controller, you can just bind data from the controller into the directive. The data in the controller will change automatically when the user changes the directive. You could set up a watcher in the controller's $scope to trigger events when the directive changes the data, or pass a callback from the controller to the directive, so the directive can tell the controller that data has changed:
app.controller('MyController', function($scope){
$scope.colors = [
{color: 'Red'},
{color: 'Green'},
{color: 'Blue'}
];
});
app.directive('MyDirective', function(){
return {
scope: {
colors: '='
},
templateUrl: '/my-template.html'
};
});
// Template file: my-template.html
<div>
<select ng-options="opt.color for opt in colors">
</div>
// index.html
<my-directive colors="colors"></my-directive>
What you might also consider, depending on your requirements, is to have the directive take the data from the controller, then handle all of the logic inside itself, instead of sending the data back to the controller and let the controller handle any logic.
For example, if your directive needs to take some input from the user and that data needs to be saved on a database, don't send the data back from the directive back to the controller, and from the controller to the server. Simply send it straight from the directive to the server. Then you can reuse the directive without rewriting the logic to send the data to a server.
One of solution is to pass an object of the controller (eg: exposedAPI) in an attribute of your directive. Then, the directive will fill this object with the exposed functions.
Controller
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $timeout) {
$scope.exposedAPI = {};
//Later in the code...
$timeout(function() {
$scope.exposedAPI.elmt_1.sayHello();
//or
$scope.exposedAPI.elmt_2.selectIndex(42);
//or
$scope.exposedAPI.elmt_3.changeDirectiveContent('Yeah !');
});
});
Directive
app.directive("byteme", function() {
return {
scope: {
'api': '='
},
template: '<div>{{content}}</div>',
link: function(scope, element, attrs) {
scope.content = 'Byteme directive!'
//Exposed functions
scope.api[attrs.id] = {
sayHello: function() {
console.log("Hello World !");
},
selectIndex: function(index) {
console.log("Selected index: "+index);
},
changeDirectiveContent: function(newContent) {
scope.content = newContent;
}
};
}
}
});
HTML
<div byteme id="elmt_1" api="exposedAPI"></div>
<div byteme id="elmt_2" api="exposedAPI"></div>
<div byteme id="elmt_3" api="exposedAPI"></div>
<div ng-init="exposedAPI.elmt_1.changeDirectiveContent('YEAHHH')"></div> <!-- You can call API from the view directly -->
