& vs @ 和 = 在 angularJS 中有什么区别 @:单向绑定 =:双向绑定 &:函数绑定

2022-08-30 00:38:23

我对AngularJS很陌生。任何人都可以解释一下这些AngularJS运算符之间的区别:当用适当的示例隔离范围时。&, @ and =


答案 1

@允许在指令属性上定义的值传递到指令的隔离作用域。该值可以是简单的字符串值 (),也可以是带有嵌入式表达式 () 的 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


答案 2

我想从JavaScript原型继承的角度来解释这些概念。希望能帮助理解。

有三个选项可用于定义指令的作用域:

  1. scope: false:角度默认值。该指令的作用域正好是其父作用域之一 ()。parentScope
  2. scope: true:Angular 为此指令创建一个作用域。作用域通常继承自 。parentScope
  3. scope: {...}:隔离范围如下所述。

指定 定义一个 .An 不从 继承属性,尽管 .它通过以下方式定义:scope: {...}isolatedScopeisolatedScopeparentScopeisolatedScope.$parent === parentScope

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

isolatedScope无法直接访问 。但有时指令需要与 .它们通过 和 进行通信。关于使用符号 @=& 的主题正在讨论使用 isolatedScope 的场景parentScopeparentScope@=&

它通常用于由不同页面共享的一些常见组件,如模态。隔离的作用域可防止污染全局作用域,并且易于在页面之间共享。

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

enter image description here

@:单向绑定

@只需将属性从 传递到 。它被称为 ,这意味着您不能修改属性的值。如果你熟悉 JavaScript 继承,你可以很容易地理解这两种场景:parentScopeisolatedScopeone-way bindingparentScope

  • 如果绑定属性是基元类型,如示例中所示:您可以修改 ,但不会更改。但是,如果更改 的值,将被新值覆盖(当角度$digest时)。interpolatedPropinterpolatedPropparentProp1parentProp1interpolatedProp

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

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

=:双向绑定

=称为 ,这意味着 任何 修改 也会更新 中的值,反之亦然。此规则适用于基元和对象。如果将 的绑定类型更改为 ,您会发现 可以修改 的值。一个典型的例子是ngModeltwo-way bindingchildScopeparentScopeparentObj=parentObj.x

&:函数绑定

&允许指令调用某个函数并从指令传入某个值。例如,检查 JSFiddle: & in directive scopeparentScope

在指令中定义一个可单击的模板,例如:

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

参考:了解范围