AngularJS Isolate Scope Binding Expression Tutorial

Filed Under: AngularJS

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

  1. “Isolated”, as in the scope of the directive is not the same as the scope of the controller.

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages