AngularJS Isolate Scope Two-Way Binding Example

Earlier we looked at AngularJS Isolate scope attribute binding and I hope you got a better idea about isolate scope and how to bind attribute using the same. This is a continuation of the isolate scope series of tutorials and today we are going to look at isolate scope two-way data binding using ” =.”

AngularJS Isolate Scope Two-way Binding Directive

The @ character works well for accessing a string value passed into a directive. However, it won’t keep changes made in the directive in-sync with the external or outer scope. You can use “=” character if you need to create a two-way binding between the outer scope and the directive’s isolate scope.

We are going to explain this concept with a simple example in the following section.

Isolate Scope “=” Example

The following example demonstrates a directive that uses the “=” to explain the two way binding.

We have created a controller MainCtrl and attached ctrlRole equals Development to its scope.
Then create a directive named myEmployee having a custom local scope property role within its isolate scope.

app.js


var app = angular.module('mainApp', []);

	app.controller("MainCtrl", function($scope){
		$scope.ctrlRole = "Development"
	});

	app.directive("myEmployee", function() {

		return {
			scope:
			{
				role:"="
			},
			template: 'From Directive : <input type="text" ng-model="role">'
		};
	});

The “=” character tells the directive that the object passed into the role property should be bound using a two-way binding. The “=” character make sure that if the external property value changes then the directive’s role property should automatically be updated and vice versa.


<!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> From Controller : <input type="text" ng-model="ctrlRole"></div><br>

           		<div my-employee role="ctrlRole"></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 can now play with the output. A change in any of the fields automatically reflects in the other one or we can say that two-way binding is happening between them.

Isolate Scope “=attr” Example

You can also use “=attr” property instead of ‘=’ like we used @ and @attr in the previous post.

The following example uses “=attr” instead of “=”.

app.js


var app = angular.module('mainApp', []);

	app.controller("MainCtrl", function($scope){
		$scope.ctrlRole = "Development"
	});

	app.directive("myEmployee", function() {

		return {
			scope:
			{
				role:"=myrole"
			},
			template: 'From Directive : <input type="text" ng-model="role">'
		};
	});

You can see the change in this piece of code in the following HTML.


<div my-employee myrole="ctrlRole"></div>

.
We have used the myrole instead of role as the attribute name.


<!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> From Controller : <input type="text" ng-model="ctrlRole"></div><br>

           		<div my-employee myrole="ctrlRole"></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 same output on your browser.

That’s all for now and you will see more features in the coming posts.

AngularJS Isolate Scope Two-way Binding Directive

Isolate Scope “=” Example

Isolate Scope “=attr” Example

Comments