AngularJS Isolate Scope Binding Expression Tutorial

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.

Comments