Angularjs:隔离范围和嵌套指令

时间:2014-01-28 03:41:17

标签: javascript angularjs

我遇到了以下问题,最后意识到它在Angularjs的不同版本中表现不同。请看小提琴。 http://jsfiddle.net/CfeNE/4/

我所期待的是,具有隔离范围的指令中包含的任何内容只能看到该指令的$ scope。在下面的示例中,有两个嵌套的指令。

var myApp = angular.module('myApp', [])
    .controller('TestController', ['$scope', function ($scope) {
        $scope.data = {
            type: "abc",
            values: [{name:"aa"}, {name: "bb"}]
        }
}]);   
myApp.directive('directive', function () {
    return {
        scope: {
            data: "=",
        },
        restrict: 'E'
    };
});


myApp.directive('subDirective', function () {
    return {    
        template: '<div>Data: {{data}}</div>',
        restrict: 'E'        
    };
});

我将它们嵌套为

<div ng-controller="TestController">
    <directive data="data.values">
        <sub-directive></sub-directive>
    </directive>
</div>

因此data模板看到的sub-directivedata.values。如果您在小提琴中选择angularJS 1.1.1(左侧下拉),则会出现这种情况。但是,如果我选择版本AngularJS 1.2.1,它会看到控制器范围的data。这是故意改变,还是对它的任何提及?。

编辑:

正如@hassassin指出的那样,有很多与此相关的变化

1.2.0 timely-delivery (2013-11-08)
$compile:
don't leak isolate scope state when replaced directive is used multiple times (b5af198f)
correct isolate scope distribution to controllers (3fe4491a)
replaced element has isolate scope (97c7a4e3)
only pass isolate scope to children that belong to the isolate directive (d0efd5ee)
make isolate scope truly isolate (909cabd3, #1924, #2500)

但是,可以使用转换来完成这项工作。不确定为什么@allenhwkim在评论中不起作用。 感谢。

0 个答案:

没有答案