Signup/Sign In
Ask Question
Not satisfied by the Answer? Still looking for a better solution?

What is the difference between & vs @ and = in angularJS

I am very new to AngularJS. can anybody explain me the difference among these AngularJS operators: &, @ and = when isolating scope with proper example.
by

3 Answers

akshay1995
I would like to explain the concepts from the perspective of JavaScript prototype inheritance. Hopefully help to understand.

There are three options to define the scope of a directive:

scope: false: Angular default. The directive's scope is exactly the one of its parent scope (parentScope).
scope: true: Angular creates a scope for this directive. The scope prototypically inherits from parentScope.
scope: {...}: isolated scope is explained below.
Specifying scope: {...} defines an isolatedScope. An isolatedScope does not inherit properties from parentScope, although isolatedScope.$parent === parentScope. It is defined through:

app.directive("myDirective", function() {
return {
scope: {
... // defining scope means that 'no inheritance from parent'.
},
}
})

isolatedScope does not have direct access to parentScope. But sometimes the directive needs to communicate with the parentScope. They communicate through @, = and &. The topic about using symbols @, = and & are talking about scenarios using isolatedScope.

It is usually used for some common components shared by different pages, like Modals. An isolated scope prevents polluting the global scope and is easy to share among pages.
sandhya6gczb
@ allows a value defined on the directive attribute to be passed to the directive's isolate scope. The value could be a simple string value (myattr="hello") or it could be an AngularJS interpolated string with embedded expressions (myattr="my_{{helloText}}"). Think of it as "one-way" communication from the parent scope into the child directive.
& allows the directive's isolate scope to pass values into the parent scope for evaluation in the expression defined in the attribute. Note that the directive attribute is implicitly an expression and does not use double curly brace expression syntax.
= sets up a two-way binding expression between the directive's isolate scope and the parent scope. Changes in the child scope are propagated to the parent and vice-versa. Think of = as a combination of @ and &.
pankajshivnani123
@: one-way binding

=: two-way binding

&: function binding

Login / Signup to Answer the Question.