AngularJS -隔离作用域- @ vs = vs &

简短的例子和解释可在以下链接:

http://www.codeforeach.com/angularjs/angularjs-isolated-scopes-vs-vs

@ -单向绑定

在指令:

scope : { nameValue : "@name" }

在视图:

<my-widget name="{{nameFromParentScope}}"></my-widget>

= -双向绑定

在指令:

scope : { nameValue : "=name" },
link : function(scope) {
  scope.name = "Changing the value here will get reflected in parent scope value";
}

在视图:

<my-widget name="{{nameFromParentScope}}"></my-widget>

& -函数调用

在指示中:

scope : { nameChange : "&" }
link : function(scope) {
  scope.nameChange({newName:"NameFromIsolaltedScope"});
}

在视图:

<my-widget nameChange="onNameChange(newName)"></my-widget>

我花了很长时间才真正掌握了这个。对我来说，关键是理解“@”是你想在原地求值的东西，并作为常量传递到指令中，而“=”实际上传递的是对象本身。

有一篇很好的博客文章解释了这一点:http://blog.ramses.io/technical/AngularJS-the-difference-between-@-&-and-=-when- declarations -directive -using- isolation -scopes

@:单向绑定

=:双向绑定

&:函数绑定

@ 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. John Lindquist has a series of short screencasts explaining each of these. Screencast on @ is here: https://egghead.io/lessons/angularjs-isolate-scope-attribute-binding

&允许指令的隔离作用域将值传递到父作用域，以便在属性中定义的表达式中求值。注意，指令属性是隐式的表达式，不使用双花括号表达式语法。这一点很难用文字来解释。&的截屏在这里:https://egghead.io/lessons/angularjs-isolate-scope-expression-binding

=在指令的隔离作用域和父作用域之间建立一个双向绑定表达式。子范围中的更改会传播到父范围，反之亦然。把=看成@和&的组合。=上的截屏在这里:https://egghead.io/lessons/angularjs-isolate-scope-two-way-binding

最后，这里有一个截屏，显示这三个在一个视图中一起使用:https://egghead.io/lessons/angularjs-isolate-scope-review

AngularJS -隔离作用域- @ vs = vs &

简短的例子和解释可在以下链接:

http://www.codeforeach.com/angularjs/angularjs-isolated-scopes-vs-vs

@ -单向绑定

在指令:

scope : { nameValue : "@name" }

在视图:

<my-widget name="{{nameFromParentScope}}"></my-widget>

= -双向绑定

在指令:

scope : { nameValue : "=name" },
link : function(scope) {
  scope.name = "Changing the value here will get reflected in parent scope value";
}

在视图:

<my-widget name="{{nameFromParentScope}}"></my-widget>

& -函数调用

在指示中:

scope : { nameChange : "&" }
link : function(scope) {
  scope.nameChange({newName:"NameFromIsolaltedScope"});
}

在视图:

<my-widget nameChange="onNameChange(newName)"></my-widget>

不是我的小提琴，但http://jsfiddle.net/maxisam/QrCXh/显示了差异。关键是:

           scope:{
            /* NOTE: Normally I would set my attributes and bindings
            to be the same name but I wanted to delineate between 
            parent and isolated scope. */                
            isolatedAttributeFoo:'@attributeFoo',
            isolatedBindingFoo:'=bindingFoo',
            isolatedExpressionFoo:'&'
        }