& vs @ 和 = 在 angularJS 中有什么区别 @:单向绑定 =:双向绑定 &:函数绑定
我对AngularJS很陌生。任何人都可以解释一下这些AngularJS运算符之间的区别:当用适当的示例隔离范围时。&, @ and =
我对AngularJS很陌生。任何人都可以解释一下这些AngularJS运算符之间的区别:当用适当的示例隔离范围时。&, @ and =
@
允许在指令属性上定义的值传递到指令的隔离作用域。该值可以是简单的字符串值 (),也可以是带有嵌入式表达式 () 的 AngularJS 插值字符串。可以将其视为从父范围到子指令的“单向”通信。约翰·林奎斯特(John Lindquist)有一系列简短的截屏视频来解释其中的每一个。@上的截屏视频在这里:https://egghead.io/lessons/angularjs-isolate-scope-attribute-bindingmyattr="hello"
myattr="my_{{helloText}}"
&
允许指令的隔离作用域将值传递到父作用域中,以便在属性中定义的表达式中进行计算。请注意,指令属性是隐式表达式,不使用双大括号表达式语法。这个更难用文字解释。截屏视频在这里: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
我想从JavaScript原型继承的角度来解释这些概念。希望能帮助理解。
有三个选项可用于定义指令的作用域:
scope: false
:角度默认值。该指令的作用域正好是其父作用域之一 ()。parentScope
scope: true
:Angular 为此指令创建一个作用域。作用域通常继承自 。parentScope
scope: {...}
:隔离范围如下所述。指定 定义一个 .An 不从 继承属性,尽管 .它通过以下方式定义:scope: {...}
isolatedScope
isolatedScope
parentScope
isolatedScope.$parent === parentScope
app.directive("myDirective", function() {
return {
scope: {
... // defining scope means that 'no inheritance from parent'.
},
}
})
isolatedScope
无法直接访问 。但有时指令需要与 .它们通过 和 进行通信。关于使用符号 @
, =
和 &
的主题正在讨论使用 isolatedScope 的
场景。parentScope
parentScope
@
=
&
它通常用于由不同页面共享的一些常见组件,如模态。隔离的作用域可防止污染全局作用域,并且易于在页面之间共享。
下面是一个基本指令:http://jsfiddle.net/7t984sf9/5/。要说明的图像是:
@
:单向绑定@
只需将属性从 传递到 。它被称为 ,这意味着您不能修改属性的值。如果你熟悉 JavaScript 继承,你可以很容易地理解这两种场景:parentScope
isolatedScope
one-way binding
parentScope
如果绑定属性是基元类型,如示例中所示:您可以修改 ,但不会更改。但是,如果更改 的值,将被新值覆盖(当角度$digest时)。interpolatedProp
interpolatedProp
parentProp1
parentProp1
interpolatedProp
如果绑定属性是某个对象,例如 :,因为传递给的那个对象是引用,则修改该值将触发此错误:parentObj
isolatedScope
TypeError: Cannot assign to read only property 'x' of {"x":1,"y":2}
=
:双向绑定=
称为 ,这意味着 任何 修改 也会更新 中的值,反之亦然。此规则适用于基元和对象。如果将 的绑定类型更改为 ,您会发现 可以修改 的值。一个典型的例子是ngModel
。two-way binding
childScope
parentScope
parentObj
=
parentObj.x
&
:函数绑定&
允许指令调用某个函数并从指令传入某个值。例如,检查 JSFiddle: & in directive scope。parentScope
在指令中定义一个可单击的模板,例如:
<div ng-click="vm.onCheck({valueFromDirective: vm.value + ' is from the directive'})">
并使用如下指令:
<div my-checkbox value="vm.myValue" on-check="vm.myFunction(valueFromDirective)"></div>
变量通过 从指令传递到父控制器。valueFromDirective
{valueFromDirective: ...
参考:了解范围