javascript - 在angularJS中＆vs @和=之间有什么区别？(What is the difference between & vs @ and = in angularJS)

Question

I am very new to AngularJS.

(我是AngularJS的新手。)

can anybody explain me the difference among these AngularJS operators: &, @ and = when isolating scope with proper example.

(任何人都能解释一下这些AngularJS运算符之间的区别： &, @ and =用适当的例子隔离范围。)

  ask by Nur Rony translate from so

Answer 1

@ 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}}" ).

(值可以是一个简单的字符串值（ myattr="hello" ），也可以是带有嵌入式表达式的AngularJS插值字符串（ myattr="my_{{helloText}}" ）。)

Think of it as "one-way" communication from the parent scope into the child directive.

(可以将其视为从父作用域到子指令的“单向”通信。)

John Lindquist has a series of short screencasts explaining each of these.

(John Lindquist有一系列简短的截屏视频解释了每一个。)

Screencast on @ is here: https://egghead.io/lessons/angularjs-isolate-scope-attribute-binding

(关于@的截屏是： https ： //egghead.io/lessons/angularjs-isolate-scope-attribute-binding)

& 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.

(请注意，directive属性是隐式表达式，不使用双花括号表达式语法。)

This one is tougher to explain in text.

(这篇文章更难以解释。)

Screencast on & is here: https://egghead.io/lessons/angularjs-isolate-scope-expression-binding

(屏幕上播放＆在这里： https ： //egghead.io/lessons/angularjs-isolate-scope-expression-binding)

= 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 &.

(将=视为@和＆的组合。)

Screencast on = is here: https://egghead.io/lessons/angularjs-isolate-scope-two-way-binding

(Screencast on =在这里： https ： //egghead.io/lessons/angularjs-isolate-scope-two-way-binding)

And finally here is a screencast that shows all three used together in a single view: https://egghead.io/lessons/angularjs-isolate-scope-review

(最后，这是一个截屏视频，显示在一个视图中一起使用的所有三个： https ： //egghead.io/lessons/angularjs-isolate-scope-review)