3

我正在创建一个需要来自父控制器的一些数据的指令。将数据放入控制器中，scope使得$scope.data = myData;数据可以在指令中访问。我看到我们使用隔离范围将数据从控制器传递到指令。但是在这里我为什么要为此使用隔离范围。? 只是为了标准化目的吗？

4

2 回答 2

1

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

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

请注意，您还可以使用属性（attrs链接函数中的参数）来读取值。但是为了刷新组件的视图，需要始终观察变化。当您使用绑定时，您也不需要，除非您有一些特定的过程。

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

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，因此有更多机会插入错误。

编辑：这是另一篇关于插值和解析的很好答案的帖子：使用 $attrs 来评估带有花括号的属性

于 2016-06-20T07:00:36.097 回答
0

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”，指令内的文本框也是空白的。这是因为新的独立作用域对其父作用域一无所知。

但是，我们现在可以将一些值从父作用域传递给指令吗？

是的 ！不仅如此，我们可能需要处理诸如在父作用域中调用回调、在父作用域和指令作用域之间进行双向绑定等情况。

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

查看指令模板，我们可以看到其中使用了范围属性。大多数指令的模板和链接功能将使用范围属性。这些属性的行为再次取决于它们的值——也称为前缀——提供。这些前缀用于将父作用域的方法和属性绑定到指令作用域。

  1. “@”（文本绑定/单向绑定）
  2. “=”（直接模型绑定/双向绑定）
  3. “&”（行为绑定/方法绑定）

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

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

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

请参阅下面的链接以了解角度 JS 中的孤立范围。

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

于 2019-04-05T11:41:49.810 回答