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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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.
|
1 2 3 |
<div my-employee myrole="ctrlRole"></div> |
.
We have used the myrole instead of role as the attribute name.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!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.