@允许在指令属性上定义的值传递到指令的隔离作用域。该值可以是简单的字符串值 （），也可以是带有嵌入式表达式 （） 的 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原型继承的角度来解释这些概念。希望能帮助理解。

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

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/。要说明的图像是：

@：单向绑定

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

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

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

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

=：双向绑定

=称为 ，这意味着 任何 修改 也会更新 中的值，反之亦然。此规则适用于基元和对象。如果将 的绑定类型更改为 ，您会发现 可以修改 的值。一个典型的例子是ngModel。two-way bindingchildScopeparentScopeparentObj=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: ...

参考：了解范围