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

angularjs-isolate-scope-two-way-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

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.

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

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

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

You will see the same output on your browser.

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

By admin

Leave a Reply