为什么我应该在 AngularJS 中使用隔离的作用域指令

Question

我想知道为什么我应该使用隔离的作用域指令？我总是可以在控制器内通过服务获取一些数据，这些数据将在没有隔离范围的指令中可用，如果我想在其他地方使用该指令，我可以发送请求并获取数据......右？

创建具有独立作用域的指令时，必须获取数据并将其传递给指令。

使用独立作用域指令有什么优势？

为什么我应该使用它以及何时使用它？

Answer 1

因为它使您的指令成为自己的模块（设计方面，我不是在谈论angular.module s ;-）具有明确定义的自包含接口，这意味着它可以在任何上下文中重用。它还使其代码可读，因为指令使用的所有内容都在指令代码中，而不是在它所依赖的某个神奇的父作用域中。让我们看一个没有隔离作用域的示例：

控制器：

angular.module("carShop",[])
.controller("CarStorefrontController",function(){
    //For simplicity
    this.cars = [
        { name: 'BMW X6', color: 'white' },
        { name: 'Audi A6', color: 'black' } 
    ];
});

命令：

angular.module("carShop")
.directive("carList",function(){
    return {
        template: ['<ul>',
                       '<li ng-repeat="car in vm.cars">',
                       'A {{car.name}} in shiny-{{car.color}}',
                       '</li>',
                   '</ul>'].join("")
    };
});

页：

<div ng-app="carShop" ng-controller="CarStorefrontController as vm">
    <h2>Welcome to AwesomeCarShop Ltd. !</h2>
    <p>Have a look at our currently offered cars:</p>
    <car-list></car-list>
</div>

这有效，但不可重用。如果我想在我的应用程序中的其他地方显示汽车列表，我需要将我的控制器重命名为 vm 并让它有一个名为 cars 的字段，其中包含我的汽车数组，以便它工作。但是如果我将我的指令更改为

angular.module("carShop")
.directive("carList",function(){
    return {
        scope: { cars: '=' },
        template: [ /* same as above */ ].join("")
    };
});

并将我的店面页面上的<car-list></car-list>更改为<car-list cars="vm.cars"></car-list>"，我可以通过传入任何汽车阵列来在任何地方重复使用该指令，而无需关心该数组来自何处。此外，我现在可以将店面页面上的控制器替换为完全不同的控制器，而无需更改我的指令定义（也无需更改我使用车辆列表的所有其他地方）。

这实际上归结为同样的原因，为什么你不应该把所有的javascript变量放在一个全局范围内，这样它们就可以从任何地方轻松访问：可重用性，可读性，可维护性 - 这就是你通过模块化和封装你的代码得到的，通过遵循黑盒原理进行低耦合和高内聚

Answer 2

具有隔离作用域的指令，基本上是在您想要创建一个可在整个应用程序中重用的组件时使用的，以便您可以在 angular 模块的任何地方使用它。

独立作用域

意味着您正在创建一个新作用域，该作用域不会从父作用域原型继承。但是，您可以将值传递给要从父作用域中要求的指令。它们可以通过属性值以各种形式传递，您可以选择使用 scope: {} 将指令作为隔离范围。

1. @ - 表示插值值，如{{somevalue}}
2. = - 表示与父作用域变量的双向绑定属性{{somevalue}}
3. & - 表示可以将方法引用传递给可从指令调用的指令

使用 $scope.$new(true); 创建的独立作用域，其中$scope是放置指令标记的当前作用域。

正如您所说，您将在服务中存储数据，而不是创建一个孤立的范围。但是这种方法永远不会适合您，因为服务是只有一个实例的单例。如果你想多次使用你的指令，那么你需要在服务中制作另一个变量，它将获取其他元素所需的数据。如果该指令计数增加到 10，那么想想你的服务会是什么样子，那看起来真的很可怜。

通过使用隔离作用域，代码看起来更加模块化，代码的可重用性将得到提高。隔离的作用域变量永远不会与父作用域中同名的其他变量冲突。