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
Copy
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.
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> 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
Copy
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.
Copy
<div my-employee myrole="ctrlRole"></div>
.
We have used the myrole instead of role as the attribute name.
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> 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.
david says
November 4, 2016 at 4:15 amhi,
this article seems very effective,thanks for the great article.