在angularJS中&vs @和=之间有什么区别？

Question

我是AngularJS的新手.任何人都可以解释这些AngularJS运算符之间的区别:&, @ and =用适当的例子隔离范围.

Answer 1

@允许将指令属性上定义的值传递给指令的隔离范围.值可以是简单的字符串值(myattr="hello"),也可以是带有嵌入式表达式(myattr="my_{{helloText}}")的AngularJS插值字符串.可以将其视为从父作用域到子指令的"单向"通信.John Lindquist有一系列简短的截屏视频解释了每一个.关于@的截屏是:https://egghead.io/lessons/angularjs-isolate-scope-attribute-binding

&允许指令的隔离范围将值传递到父作用域中,以便在属性中定义的表达式中进行评估.请注意,directive属性是隐式表达式,不使用双花括号表达式语法.这篇文章更难以解释.屏幕上播放&在这里:https://egghead.io/lessons/angularjs-isolate-scope-expression-binding

=在指令的隔离范围和父范围之间设置双向绑定表达式.子范围的更改将传播到父级,反之亦然.将=视为@和&的组合.Screencast on =在这里:https://egghead.io/lessons/angularjs-isolate-scope-two-way-binding

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

Answer 2

我想从JavaScript原型继承的角度来解释这些概念.希望有助于理解.

有三个选项可以定义指令的范围:

1. scope: false:Angular默认值.该指令的范围正是其父范围(parentScope).
2. scope: true:Angular为此指令创建范围.范围原型继承自parentScope.
3. scope: {...}:隔离范围解释如下.

指定scope: {...}定义isolatedScope.一个isolatedScope没有继承性parentScope,虽然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/.要说明的图像是:

@:单向绑定

@简单地从传递特性parentScope来isolatedScope.它被调用one-way binding,这意味着您无法修改parentScope属性的值.如果您熟悉JavaScript继承,则可以轻松地理解这两种情况:

• 如果绑定属性是基本类型,如interpolatedProp示例中所示:您可以修改interpolatedProp,但parentProp1不会更改.但是,如果更改值parentProp1,interpolatedProp将被新值覆盖(当angular $ digest时).

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

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

=:双向绑定

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

&:功能绑定

&允许指令调用某个parentScope函数并从指令传入一些值.例如,检查JSFiddle:&在指令范围内.

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

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

参考:了解范围

Answer 3

不是我的小提琴,但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:'&'
        }        

Answer 4

@:单向绑定

=:双向绑定

&:功能绑定

Answer 5

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>

Answer 6

我花了很长时间才真正掌握了这一点.对我来说,关键在于理解"@"是指你想要在原地进行评估的东西,并作为常量传递给指令,其中"="实际上传递了对象本身.

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