We have seen how to use local scope properties to pass values into a directive as strings ( “@” ) and how to bind to external objects using a two-way data binding ( “=”). In this post, we are going to look at the “&” which is used to call an expression on the parent scope from the isolated scope.
AngularJS Isolate Scope “&” Example
The “&” local scope property allows the consumer of a directive to pass in a function and directive can invoke whenever it wants to.
In this section, we are going to explain isolate scope “&” with an example. We will create a myEmployee directive to display an input text field and a button. When the user clicks on the button, it will notify the controller and alert a message using the input value.
The following example demonstrates this usage.
app.js
var app = angular.module('mainApp', []);
app.controller("MainCtrl", function($scope){
$scope.clickMe = function(message){
alert(message);
}
});
app.directive("myEmployee", function() {
return {
scope:{
send:"&"
},
template: 'Type Something: <input type="text" ng-model="inputMsg">'+
'<button ng-show="inputMsg" ng-click="send( {message : inputMsg} )">Click Me!</button>'
};
});
- Create a controller MainCtrl and define a function clickMe() in its scope.
- Then we create a myEmployee directive.
- The directive creates a custom local scope property within its isolate scope named send. This is done using
scope { send: "&" }. In this example,send is just an alias for clickMe function. When send is invoked, the clickMe function that was passed in will be called. - The template within the directive contains a text field and a button.
- The button displays only when something is typed in the input field (
ng-show="inputMsg"). - When the button is clicked the scope property send, which is really a reference to the clickMe function that was passed in) can then be invoked.
- We have used this special syntax to pass the input value
send( {message : inputMsg} - The following code shows how to use our directive and pass the clickMe function which is defined in the controller to the scope property, send
<div my-employee send="clickMe(message)"></div>
- Â The clickMe function in the controller will alert our passed in message.
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>AngularJS Isolate Scope</title>
</head>
<body>
<div ng-app="mainApp">
<div ng-controller="MainCtrl">
<div my-employee send="clickMe(message)"></div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
You will see the following output on your browser.
That’s all for now and we will see more AngularJS features in the upcoming posts.
This is useful !
“Isolated”, as in the scope of the directive is not the same as the scope of the controller.