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
Copy
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
Copy
<div my-employee send="clickMe(message)"></div>
- The clickMe function in the controller will alert our passed in message.
index.html
Copy
<!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.
Janet Parker says
November 5, 2017 at 11:07 pm“Isolated”, as in the scope of the directive is not the same as the scope of the controller.