Question

我正在创建一个需要来自父控制器的数据的指令。将数据放在@EnableJpaRepositories scope中的控制器中，可以在指令中访问数据。我看到从控制器传递数据到指令我们使用隔离范围。但是为什么我应该为此使用隔离范围。？它仅用于标准化目的吗？

Answer 1

隔离范围使组件可重复使用并允许控制绑定：单向或双向。

如果使用继承范围，则意味着您将在父范围内搜索值，这会降低组件的可重用性。在使用父母范围内的数据时，您如何能够使用两次相同的组件和不同的数据？你不能。

请注意，您还可以使用attributs（链接函数中的attrs param）来读取值。但是需要始终注意更改以刷新组件的视图。当你使用绑定时，你也不需要，除非你有一些特定的过程。

作为一个例子，假设您创建了一个指令以使文本变为粗体。如果您使用隔离范围，则必须执行以下操作：

scope:{
   text:'@myText'
}, 
template : <strong>{{text}}</strong>

现在，如果您使用属性，则必须执行此操作：

scope:false, 
template : <strong>{{text}}</strong>
link:function(scope, element, attrs){
    attrs.$observe('myText', function(newValue){
       scope.text = newValue;
    });
}

这使您编写更多代码，而不是依赖angularJS，因此更有可能插入错误。

编辑：这是另一篇关于插值和解析的答案非常好的帖子：Using $attrs to evaluate attribute with curly braces in it

Answer 2

JavaScript代码：

var app = angular.module("test",[]);

app.controller("Ctrl1",function($scope){
    $scope.name = "Harry";
    $scope.reverseName = function(){
        $scope.name = $scope.name.split('').reverse().join('');
    };
});
app.directive("myDirective", function(){
    return {
        restrict: "EA",
        scope: {},
        template: "<div>Your name is : {{name}}</div>"+
        "Change your name : <input type='text' ng-model='name'/>"
    };
});

HTML：

<div ng-app="test">

    <div ng-controller="Ctrl1">
        <h2 ng-click="reverseName()">Hey {{name}}, Click me to reverse your name</h2>
        <div my-directive class='directive'></div>
    </div>
</div>

我们刚刚创建了一个具有隔离范围的指令。注意，即使父作用域也有一个名称“ Harry”，指令内部的文本框也是空白的。这是因为新的“隔离”范围对其父范围一无所知。

但是，我们现在可以将某些值从父范围传递给指令吗？

是的！不仅如此，我们可能还需要处理以下情况，例如在父范围内调用回调，父范围和指令范围之间的双向绑定..etc

要访问任何父范围数据，我们需要将其显式传递给指令。这是通过在DDO中的作用域对象上设置属性来实现的。可以将这些属性想象为指令的接口，以与外部范围进行通信。另一个重要的事情是，这些属性也必须设置为指令html元素的属性。

看看指令模板，我们可以看到这里使用了范围属性。大多数情况下，指令的模板和链接函数将使用范围属性。这些属性的行为再次取决于它们提供的值（也称为前缀）。这些前缀用于将父范围的方法和属性绑定到指令范围。

“ @”（文本绑定/单向绑定）
“ =”（直接模型绑定/双向绑定）
“＆”（行为绑定/方法绑定）

“ @”前缀是指令范围和父范围之间的单向绑定。它始终希望映射的属性是一个表达式。这个非常重要;因为要使“ @”前缀起作用，我们需要将属性值包装在{{}}中。由于“ @”将在父作用域和指令作用域之间创建单向绑定，因此在父作用域中进行的任何更改都将反映在指令作用域内部，而不会在其他方面反映。当我们的指令需要使用父级作用域中的某些数据进行初始化时，“ @”前缀非常有用。

第二，我们有“ =”前缀。它在父作用域和指令作用域之间创建双向绑定。关于“ =”前缀最重要的一点是，它总是希望属性值是模型名称。这意味着您不能提供一个表达式作为映射到“ =”前缀的属性值。当我们的任何指令范围属性与父范围属性相同时，这很有用。

最后，我们将讨论最后一个前缀。 “＆”前缀也称为方法绑定。这用于将任何方法从父范围绑定到指令范围。当我们的指令需要在父范围内执行任何回调时，这将特别有用。查看代码，以了解如何设置“＆”前缀的属性值。

请参考下面的链接以深入了解角度JS中的隔离范围。

https://www.undefinednull.com/2014/02/11/mastering-the-scope-of-a-directive-in-angularjs/

我为什么要使用隔离范围？

2 个答案: