Question

有一个名为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
        }
    };
});

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

但是，由于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。那么这里的问题是什么？

Answer 1

使用scope选项时，可以创建一个隔离范围，根据定义，它与父范围分开。

您需要将param添加到隔离范围并将其传递到param或者您需要删除范围并在父范围内定义index.php。< / p>

以下是Angular docs对隔离范围的评价：

顾名思义，该指令的隔离范围隔离了除了您已明确添加到范围的模型之外的所有内容：{}哈希对象。这在构建可重用组件时很有用，因为它可以防止组件更改模型状态，除了您明确传入的模型。

注意：通常，范围原型继承自其父级。孤立的范围没有。请参阅＆＃34;指令定义对象 - 范围＆＃34;有关隔离范围的更多信息，请参阅。

添加指令范围使其余部分不可更新

1 个答案: