添加指令作用域会使其余部分不可更新

Adding directive scope makes the rest non-updateable

本文关键字：余部 可更新 指令 作用域 添加      更新时间：2023-09-26

有一个叫做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
        }
    };
});

按预期工作，用Name defined in directive覆盖Initial name。

然而，由于有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。那么问题是什么呢?

当你使用作用域选项时，你创建了一个隔离作用域，根据定义，它与父作用域分开。

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

以下是Angular文档对隔离作用域的解释:

顾名思义，该指令的隔离作用域隔离了除了你显式添加到作用域的模型之外的所有东西:{}hash对象。这在构建可重用组件时很有帮助，因为它可以防止组件更改模型状态，除了您显式传递的模型。

注意:通常情况下，作用域原型继承自它的父级。孤立作用域不需要。参见"指令定义对象-作用域"节，获取有关隔离作用域的更多信息。

相关文章：