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

Question

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

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

使用独立作用域指令有什么好处？

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

Answer 1

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

Controller :

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>

这有效，但不可重复使用。如果我想在我的应用程序的其他地方显示汽车列表，我需要将我的 Controller 重命名为 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>" ，我可以在任何地方重用该指令，只需传入任何汽车数组，而无需关心该数组的来源。此外，我现在可以用一个完全不同的 Controller 替换店面页面上的 Controller ，而无需更改我的指令定义(并且无需更改我使用 car-list 的所有其他地方)。

这实际上归结为您不应该将所有 javascript 变量放在一个全局范围内以便从任何地方都可以轻松访问它们的相同原因:可重用性、可读性、可维护性 - 这就是您通过模块化和 encapsulating 获得的结果你的代码，通过寻找 low coupling and high cohesion以下 black-box-principle .