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>"，我可以通过传入任何数组的汽车来重复使用该指令，而无需关心该阵列的来源。另外，我现在可以在店面页面上用完全不同的控制器替换我的控制器，而不必更改我的指令定义（并且不更改我使用car-list的所有其他位置）。

这实际上归结为你不应该将所有javascript变量放到一个全局范围内的原因，因此可以从任何地方轻松访问它们：可重用性，可读性，可维护性 - 这就是模块化和{{3}您的代码，方法是encapsulating后面的low coupling and high cohesion。

Answer 2

当您想要创建一个可在整个应用程序中重复使用的组件时，基本上使用带有隔离范围的指令，以便您可以在角度模块的任何位置使用它。

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

@ - 表示插值如{{somevalue}}
= - 表示与中提到的父范围变量的双向绑定属性{{somevalue}}
& - 表示您可以将方法引用传递给可以从指令

使用$scope.$new(true);创建的隔离范围，其中$scope是放置指令标记的当前范围。

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

通过使用隔离范围，代码看起来更模块化，代码可重用性将得到改善。隔离范围变量永远不会与父范围中具有相同名称的其他变量冲突。

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

2 个答案: