Question

我正在尝试理解agularJS中的“范围”，我无法理解以下代码：

HTML：

<body ng-app="myModule">

<div ng-controller="MyCtrl">
    <my-component>
        <h2>Attribute</h2>
        {{isolatedAttributeFoo}}
    </my-component>

    <my-component>
        <h2>Attribute</h2>
        {{isolatedAttributeFoo}}
    </my-component>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="app.js"></script>

AngularJS：

var myModule = angular.module('myModule', [])
.directive('myComponent', function () {
    return {
        restrict:'E',
        scope:{}
    };
})
.controller('MyCtrl', ['$scope', function ($scope) {
    $scope.isolatedAttributeFoo = 'Hello!';
}]);

正如您所看到的，这是一个非常简单的测试。据我所知（来自this示例），指令的子节点（在示例中，“my-component”中的元素）从指令继承范围，因为“my-component”范围孤立的，“isolatedAttributeFoo”变量不应该从控制器的“isolatedAttributeFoo”变量获取值...但它确实如此。为什么？我误解了什么吗？

如果你想尝试一下，here就是小提琴。

Answer 1

在指令定义中包含template或templateUrl时，您只能隔离范围。另外，它只会从父级继承而且视图甚至不会识别对指令的链接或控制器所做的范围的任何更改

尝试以下方法：

HTML

<my-component></my-component>

JS

.directive('myComponent', function () {
    return {
        restrict:'E',
        template: ' <h2>Attribute</h2>{{isolatedAttributeFoo}}',
        scope:{},
        link:function(scope){
           scope.isolatedAttributeFoo = 'Good Bye!';
        }
    };
});

DEMO

Answer 2

我认为这很清楚：

这是一个小提琴：

https://jsfiddle.net/kst65t0p/3/

var myModule = angular.module('myModule', [])
    .directive('myComponent', function () {
        return {
            restrict:'E',
            scope:{},
            link : function(scope){
               alert(scope.isolatedAttributeFoo);
            }
        };
    })
    .controller('MyCtrl', ['$scope', function () {
        this.isolatedAttributeFoo = 'Hello!';        
    }]);

<div ng-app="myModule" ng-controller="MyCtrl">
    <my-component>
        <h2>Attribute</h2> {{MyCtrl.isolatedAttributeFoo}}
    </my-component>
            
    <my-component>
        <h2>Attribute</h2> {{MyCtrl.isolatedAttributeFoo}}
    </my-component>
</div>









<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

您的范围被隔离到链接功能中链接功能是控制器对视图的指令。

了解指令的孩子的范围

2 个答案: