AngularJS - Isolated Scopes - @ vs = vs &

Directive is the most powerful feature of AngularJS framework. Every directive can have scope , which can either be inherited from its parent scope or else it can have its own scope ( isolated scope ). Here, working with isolated scopes is the tricky part but understanding about it will make it easy and powerful.

Directive - which uses parent scope

Directive - which has its own scope ( isolated scope )

Here, scope : {...} will create an isolated scope for the directive.

@ vs = vs &



@ - one way binding

Using this , you can bind a value from parent scope to isolated scope . Here , changing of bound value in isolated scope will not affect the parent scope value. In short, a string value will be passed from parent scope to isolated scope using this method.

Example - Directive scope ( isolated scope ):

scope : { nameValue : "@name" }

Example - binding of value in view ( parent scope ) :


= - two way binding

Using this, you can bind a value from parent scope to islated scope. Here, change in parent scope will get reflected in isolated scope and also the other way around. Which means that the change in isolated scope will also get reflected in the parent scope.

Example View :


& - Function call

Using this, you can call a function in parent scope from isolated scope.

Example View :




Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">