Javascript 为什么我应该在AngularJS中使用隔离范围指令？

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

当您创建具有隔离作用域的指令时，必须获取数据并将其传递给指令

使用独立作用域指令的优点是什么？

---

我为什么要使用它以及何时使用它？*

因为它使您的指令成为一个自己的模块（从设计角度来看，我不是说

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("")
    };
});

将我的店面页面上的

更改为

“

，我可以在任何地方重复使用该指令，只需传入任何汽车数组，而不必关心该数组来自何处。此外，我现在可以用完全不同的控制器替换店面页面上的控制器，而无需更改指令定义（并且不改变我使用汽车列表的所有其他地方）

---

这与为什么不应该将所有javascript变量放在一个全局范围内，以便从任何地方都可以轻松访问它们的原因是一样的：可重用性、可读性和可维护性——这是通过模块化和代码，通过遵循.p>指令得到的，其中隔离范围基本上在您希望创建一个可在整个应用程序中重用的组件，以便您可以在模块上的任何位置使用它

隔离作用域意味着您正在创建一个新的作用域，该作用域不是从父作用域原型继承的。但是您可以将值传递给希望从父作用域中获得的指令。它们可以以各种形式通过属性值传递，您可以使用

scope:{}

将指令设置为隔离范围

@

-表示类似于

{{somevalue}}

=

-表示与中提到的父范围变量的双向绑定 属性

{somevalue}

&

-意味着您可以将方法引用传递给可以从指令调用的指令

使用

$scope.$new（true）；

创建的隔离作用域，其中

$scope

是放置指令标记的当前作用域

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

---

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

此外，这里有类似的解释和更多关于隔离作用域的内容：回答得很好！@VeskoVujovic如果你说得更清楚一点，请添加一些简短的说明代码示例并提供Id，我很乐意这样做：-）

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

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