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

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

scope: false: Angular默认值。该指令的作用域就是它的父作用域(parentScope)。 scope: true: Angular为这个指令创建了一个作用域。作用域原型继承自parentScope。 范围:{…}:孤立作用域解释如下。

指定范围:{…}定义一个isolatedScope。isolatedScope不从parentScope继承属性，尽管isolatedScope。$parent === parentScope。它的定义是:

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

isolatedScope不能直接访问parentScope。但有时指令需要与parentScope通信。它们通过@，=和&进行交流。关于使用符号@，=和&的话题讨论的是使用isolatedScope的场景。

它通常用于不同页面共享的一些公共组件，如modal。孤立的作用域可以防止污染全局作用域，并且易于在页面之间共享。

这是一个基本指令:http://jsfiddle.net/7t984sf9/5/。图解如下:

@:单向绑定

@只是将属性从parentScope传递给isolatedScope。它被称为单向绑定，这意味着您不能修改parentScope属性的值。如果你熟悉JavaScript继承，你可以很容易地理解这两个场景:

If the binding property is a primitive type, like interpolatedProp in the example: you can modify interpolatedProp, but parentProp1 would not be changed. However, if you change the value of parentProp1, interpolatedProp will be overwritten with the new value (when angular $digest). If the binding property is some object, like parentObj: since the one passed to isolatedScope is a reference, modifying the value will trigger this error: TypeError: Cannot assign to read only property 'x' of {"x":1,"y":2}

=:双向绑定

=被称为双向绑定，这意味着在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: ....从指令传递给父控制器

参考:理解范围

我花了很长时间才真正掌握了这个。对我来说，关键是理解“@”是你想在原地求值的东西，并作为常量传递到指令中，而“=”实际上传递的是对象本身。

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

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

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

scope: false: Angular默认值。该指令的作用域就是它的父作用域(parentScope)。 scope: true: Angular为这个指令创建了一个作用域。作用域原型继承自parentScope。 范围:{…}:孤立作用域解释如下。

指定范围:{…}定义一个isolatedScope。isolatedScope不从parentScope继承属性，尽管isolatedScope。$parent === parentScope。它的定义是:

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

isolatedScope不能直接访问parentScope。但有时指令需要与parentScope通信。它们通过@，=和&进行交流。关于使用符号@，=和&的话题讨论的是使用isolatedScope的场景。

它通常用于不同页面共享的一些公共组件，如modal。孤立的作用域可以防止污染全局作用域，并且易于在页面之间共享。

这是一个基本指令:http://jsfiddle.net/7t984sf9/5/。图解如下:

@:单向绑定

@只是将属性从parentScope传递给isolatedScope。它被称为单向绑定，这意味着您不能修改parentScope属性的值。如果你熟悉JavaScript继承，你可以很容易地理解这两个场景:

If the binding property is a primitive type, like interpolatedProp in the example: you can modify interpolatedProp, but parentProp1 would not be changed. However, if you change the value of parentProp1, interpolatedProp will be overwritten with the new value (when angular $digest). If the binding property is some object, like parentObj: since the one passed to isolatedScope is a reference, modifying the value will trigger this error: TypeError: Cannot assign to read only property 'x' of {"x":1,"y":2}

=:双向绑定

=被称为双向绑定，这意味着在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: ....从指令传递给父控制器

参考:理解范围

@:单向绑定

=:双向绑定

&:函数绑定

@ allows a value defined on the directive attribute to be passed to the directive's isolate scope. The value could be a simple string value (myattr="hello") or it could be an AngularJS interpolated string with embedded expressions (myattr="my_{{helloText}}"). Think of it as "one-way" communication from the parent scope into the child directive. John Lindquist has a series of short screencasts explaining each of these. Screencast on @ is here: https://egghead.io/lessons/angularjs-isolate-scope-attribute-binding

&允许指令的隔离作用域将值传递到父作用域，以便在属性中定义的表达式中求值。注意，指令属性是隐式的表达式，不使用双花括号表达式语法。这一点很难用文字来解释。&的截屏在这里: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

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