The initial setup:
<div ng-app="phoneApp">
<div ng-controller="AppCtrl">
<div phone dial="callHome('called home!')"></div>
</div>
</div>
var app = angular.module('phoneApp', []);
app.controller("AppCtrl", function ($scope) {
$scope.callHome = function (message) {
alert(message);
};
});
app.directive("phone", function () {
return {
scope: {
dial: "&"
},
template: '<div class="button" ng-click="dial()">Call home!</div>',
};
});
The “&” operator allows you to invoke or evaluate an expression on the parent scope of whatever the directive is inside of.
With, this, it is possible to pass data into a scoped method within the template.
app.directive("phone", function () {
return {
scope: {
dial: "&"
},
template: '<input type="text" ng-model="value">' +
'<div class="button" ng-click="dial({message:value})">' +
'Call home!</div>',
};
});
app.directive("phone", function () {
return {
scope: {
dial: "&"
},
template: '<input type="text" ng-model="value">' +
'<div class="button" ng-click="dial({message:value})">' +
'Call home!</div>',
};
});
<div phone dial="callHome(message)"></div>
The dial() method is invoked in the template, passed an object which wraps the value model taken from the input. The dial() method is mapped to the callHome() method in the view, which takes the message object parameter from the template. This allows a level of indirection between what is invoked within the directive in the view, and what the directive evaluates to in its functional definition.
This allows us to declare multiple identical instances of the phone dial div, and each will maintain isolate scope and proper binding while correctly interfacing with the shared controller.
There's more to learn!