什么是隔离范围？

在 AngularJS 应用程序中，指令默认可以访问父作用域。

由于 AngularJS 现在是一个已弃用的框架，我们可以改用 JavaScript 现代框架，如 Vuejs、React 和 Angular。

例如，以下指令依赖父作用域来写出客户对象的名称和街道属性：

angular.module('MyModule').directive('MyDirective', function () {
    return {
        template: 'Name: [[ user.name ]] Street: [[ user.street ]]' //print symbols are Interpolated
    };
});

虽然这段代码完成了工作，但我们必须了解很多关于父作用域的信息才能使用指令，并且可以轻松地使用 ng-include 和 HTML 模板来完成同样的事情（这在第一篇文章中讨论过）。
如果父作用域发生了变化，则该指令不再有用。

如果你想创建一个可重用的指令，你不能依赖父作用域，而必须使用称为 Isolate Scope 的东西。
这是一个比较共享范围和隔离范围的图表：

AngularJs创建隔离

在指令中隔离作用域是一个简单的过程。
首先将范围属性添加到指令中，如下所示。
它自动将指令的作用域与任何父作用域隔离开来。

angular.module('MyModule').directive('MyDirective', function () {
    return {
        scope: {},
        template: 'Name: [[ user.name ]] Street: [[ user.street ]]' //print symbols are Interpolated
    };
});

AngularJs范围属性 @Scope属性

@local scope 属性用于访问在指令外部定义的字符串值。
例如，控制器可以在 $scope 对象上定义 name 属性，我们需要在教程中访问该属性。
为此，我们可以在指令的 scope 属性中使用 @。
这是该概念的高级示例，并带有分步说明：

• 控制器定义 $scope.name。
• $scope.name 属性值需要传递到指令中。
• 该指令在其名为 name 的隔离范围内创建一个自定义本地范围属性（请注意，该属性可以命名为任何名称，不必与 $scope 对象的属性名称匹配）。这是使用范围 { name: ‘@’ } 完成的。
• @ 字符告诉指令传递到新名称属性的值将作为字符串访问。如果外部值更改，则指令的隔离范围内的 name 属性将自动更新。
• 指令中的模板现在可以绑定到隔离范围的名称属性。

angular.module('MyModule').controller('UsersController', ['$scope', function ($scope) {
    var counter = 0;
    $scope.users = {
        name: 'John',
        street: 'xxxx Anywhere St.'
    };

    $scope.users = [
        {
            name: 'John',
            street: 'xxxx Anywhere St.'
        },
        {
            name: 'Mike',
            street: 'xxxx Crest St.'
        },
        {
            name: 'Tom',
            street: 'xxxx Main St.'
        }
    ];
}]);
///////////////////////////////////////////////////////////////////
angular.module('MyModule').directive('MyDirective', function () {
    return {
        scope: {
          name: '@name',
          street: '@street'
        },
        template: 'Name: [[ name ]] Street: [[ street ]]'
    };
});

<div my-directive name="[[ user.name ]]" street="[[ user.street ]]"></div>
<!--We've just used Angular Interpolation to change print symbols-->

=scope 范围属性

@ 字符适用于访问传递给指令的字符串值，如前一个示例所示。
但是，它不会使指令中所做的更改与外部/外部作用域保持同步。
在需要在外部作用域和指令的隔离作用域之间创建双向绑定的情况下，我们可以使用 = 字符。
这是该概念的高级示例，并带有分步说明：

• 控制器定义了一个 $scope.person 对象。
• $scope.person 对象需要以创建双向绑定的方式传递到指令中。
• 该指令在其名为 customer 的隔离范围内创建一个自定义本地范围属性。这是使用范围{客户：‘=’}完成的。
• = 字符告诉指令应该使用双向绑定来绑定传递给客户属性的对象。如果外部属性值更改，则指令的客户属性应自动更新。如果指令的 customer 属性发生更改，则外部作用域中的对象应自动更新。
• 指令中的模板现在可以绑定到隔离范围的客户属性。