在angularJS中,&vs @和=有什么区别?

我对AngularJS非常新颖。 有没有人可以用适当的例子来解释这些(&,@和=)之间的区别。

6 Solutions collect form web for “在angularJS中,&vs @和=有什么区别?”

@允许在指令属性上定义的值传递给指令的隔离范围。 该值可以是一个简单的string值( myattr="hello" ),也可以是带embedded式expression式的AngularJS插入string( myattr="my_{{helloText}}" )。 把它看作是从父范围到子指令的“单向”通信。 约翰·林德奎斯特(John Lindquist)有一系列简短的video短片来解释每一个。 @上的截屏video位于: https : //egghead.io/lessons/angularjs-isolate-scope-attribute-binding

&允许指令的隔离范围将值传递到父级作用域中以在属性中定义的expression式中进行评估。 请注意,指令属性是隐含的expression式,不使用双花括号expression式语法。 这一个更难以在文本中解释。 截屏video在这里: https : //egghead.io/lessons/angularjs-isolate-scope-expression-binding

=在指令的隔离范围和父范围之间设置一个双向绑定expression式。 子范围的变化会传播给父代,反之亦然。 把=想象成@和&的组合。 Screencast on =在这里: https : //egghead.io/lessons/angularjs-isolate-scope-two-way-binding

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

我想从JavaScript原型inheritance的angular度来解释这些概念。 希望有助于理解。

有三个选项来定义一个指令的范围:

  1. scope: false :angular度默认。 该指令的作用域恰好是其父作用域( parentScope )的作用域parentScope
  2. scope: true :Angular为此指令创build一个范围。 范围原型从parentScopeinheritance。
  3. scope: {...} :隔离范围如下所述。

指定scope: {...}定义一个isolatedScopeisolatedScope不会从parentScopeinheritance属性,虽然是isolatedScope.$parent === parentScope 。 它通过以下定义:

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

isolatedScope不能直接访问parentScope 。 但是有时候这个指令需要和parentScope进行通信。 他们通过@=&通信。 关于使用符号@=&的主题正在讨论使用isolatedScope场景

它通常用于不同页面共享的一些常见组件,如Modals。 一个独立的范围可以防止污染全球范围,很容易在页面之间共享。

这是一个基本的指令: http : //jsfiddle.net/7t984sf9/5/ 。 一个图像来说明:

在这里输入图像说明

@ :单向绑定

@只是将属性从parentScopeisolatedScope 。 它被称为one-way binding ,这意味着你不能修改parentScope属性的值。 如果您熟悉JavaScriptinheritance,则可以轻松理解这两种情况:

  • 如果绑定属性是基本types,如示例中的interpolatedProp :您可以修改interpolatedProp ,但不会更改parentProp1 。 但是,如果您更改了parentProp1的值,则interpolatedProp将被新值覆盖(当angular度$摘要时)。

  • 如果绑定属性是一些对象,如parentObj :因为传递给isolatedScope是一个引用,修改该值将触发此错误:

    TypeError: Cannot assign to read only property 'x' of {"x":1,"y":2}

= :双向绑定

=被称为two-way binding ,这意味着childScope任何修改都会更新parentScope的值,反之亦然。 此规则适用于基元和对象。 如果将parentObj的绑定types更改为= ,则会发现可以修改parentObj.x的值。 一个典型的例子是ngModel

& :function绑定

&允许指令调用一些parentScope函数并从指令中传入一些值。 例如,检查JSFiddle:&in指令范围 。

在指令中定义一个可点击模板,如:

 <div ng-click="vm.onCheck({valueFromDirective: vm.value + ' is from the directive'})"> 

并使用如下指令:

 <div my-checkbox value="vm.myValue" on-check="vm.myFunction(valueFromDirective)"></div> 

variablesvalueFromDirective通过{valueFromDirective: ...从指令传递给父控制器。

参考: 了解范围

不是我的小提琴,但http://jsfiddle.net/maxisam/QrCXh/显示差异&#x3002; 关键是:

  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:'&' } 

我花了很长时间才真正掌握了这个。 对我来说,关键是理解“@”是你想要在现场进行评估的东西,并作为一个常量传递给指令,其中“=”实际上是通过对象本身。

有一个很好的博客文章解释了这个: http : //blog.ramses.io/technical/AngularJS-the-difference-between-@-&-and-=-when-declaring-directives-using-isolate-scopes

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> 

@ :单向绑定

= :双向绑定

:function绑定

  • 如何在AngularJS中将广播事件注销到rootcope?
  • 如何将控制器注入到AngularJS的另一个控制器中
  • 一维string数组被angular度资源parsing为2d
  • 我可以在每个控制器angular度提供一个function吗?
  • 在angularjs中编译和链接函数有什么区别
  • 如何用Angular.js实现分页/表格布局?
  • 谷歌CDN的angular依赖?
  • 将parameter passing给angularjsfilter
  • AngularJS为一个跨源资源执行一个OPTIONS HTTP请求
  • Angularcheckbox和ng-click
  • 如何通过jQuery的.append()添加DOM元素(Angular指令)?