添加指令作用域会使其余部分无法更新。

Question

添加指令作用域会使其余部分无法更新。

3

有一个指令叫做foo，定义如下：

<div ng-app="app" ng-controller="mainController">
   {{ name }}

   <foo param="123"></foo>
</div>

以下是相关的初始化代码片段：

var app = angular.module('app', []);
app.controller('mainController', function($scope){
    $scope.name = 'Initial name';
});

app.directive('foo', function(){
    return {
        restrict : 'E',
        controller : function($scope){
            $scope.name = 'Name defined in directive';
            console.log($scope.param); // undefined
        }
    };
});

这按预期工作，并使用指令中定义的名称覆盖了初始名称。

然而，由于有param属性，我想访问它的值。所以我这样做了单向绑定：

    return {
        restrict : 'E',
        controller : function($scope){
            $scope.name = 'Name defined in directive';
            console.log($scope.param); // 123 as expected
        },
        scope : {
          param : "@"
        }
    }

这导致了父级作用域的更新中断。现在运行时，它会呈现Initial name而不是预期的Name defined in directive。那么问题出在哪里呢？

- Yang

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Anid Monsur · Accepted Answer

当您使用作用域选项时，您将创建一个孤立作用域，该作用域从定义上来说与父作用域分离。

您需要将name添加到您的孤立作用域中，并像param一样传递它，或者您需要删除作用域并在父作用域上定义param。

以下是Angular文档关于孤立作用域的说明：

正如名称所示，指令的孤立作用域除了您明确添加到作用域的模型之外，隔离了所有内容：{} 哈希对象。当构建可重用组件时，这很有帮助，因为它防止组件改变您的模型状态，除了您明确传递的模型之外。

注意：通常，作用域从其父级继承原型。孤立作用域不会。有关孤立作用域的更多信息，请参见“指令定义对象-作用域”部分。