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.
![](<iframe src="https://www.journaldev.com/wp-content/uploads/2015/04/isolateScopeTwoWay.html" width="300" height="150"></iframe>)
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.
david says
hi,
this article seems very effective,thanks for the great article.