0

我现在有一些角度方面的经验，但我仍然无法弄清楚那个。我有一个指令 2 通过另一个指令 1 嵌入。Directive1 与控制器位于同一元素上，并且它们共享相同的范围。我希望directive2 从控制器中的范围继承，但它们最终不是父/子，而是兄弟。我在这里想念什么？

这是代码：

angular.module('myModule', [])
    .controller('Controller', ['$scope', function($scope) {
        console.log('from controller', $scope);
    }])
    .directive('directive1', function(){
        return {
            restrict: 'A',
            replace: true,
            transclude: true,
            template:  '<div style="width:150px;"> <p>directive1</p>'
            +'<div style="width:100px;" ng-transclude></div> </div>',
            link: function($scope, elem, attrs){
                console.log('from directive1', $scope);
            }
        }
    })
    .directive('directive2',  function(){
        return {
            restrict: 'A',
            link: function($scope, elem, attrs) {
                console.log('from directive2', $scope);
            }
        }
    });

相关的html：

<div x-directive1 ng-controller="Controller">
    <div x-directive2> <p>directive2</p> </div>
</div>

以及 jsFiddle 的链接：http: //jsfiddle.net/RFontana/Lm7gA/1/

4

2 回答 2

2

问题在于将ng-controller直接放在进行嵌入的父指令上。包含指令创建一个新的范围。创建一个包装元素并在其上放置ng-controller指令。

像这样：

<section ng-controller="Controller">
    <div x-directive1>
        <div x-directive2> <p>directive2</p> </div>
    </div>
</section>

我已经分叉了你的小提琴并将修复程序放入其中。

为什么内部指令显示为兄弟（来自官方 AngularJS 指令文档）：

transclude - 编译元素的内容并使其可用于指令。通常与 ngTransclude 一起使用。嵌入的优点是链接函数接收一个预先绑定到正确范围的嵌入函数。在典型的设置中，小部件创建了一个隔离范围，但嵌入不是子范围，而是隔离范围的兄弟。这使得小部件可以拥有私有状态，并且嵌入可以绑定到父（预隔离）范围。

在您的情况下，您没有在父指令上声明隔离范围，而是在父指令上声明控制器。嵌入导致子指令成为其父级和控制器的兄弟范围，因为控制器位于父级上。

我的建议是，避免将ng-controller放在指令上。

我希望这有帮助。

于 2013-09-27T17:39:03.773 回答
1 
.directive('directive2', function() {
    return {
        restrict: 'A',
        controller: 'Controller',
        link: function(scope, elem, attrs) {
            console.log('from directive2', scope);
        }
    }
});

我不会使用 $scope 作为这些链接函数的命名参数，而是使用“范围”。这给了directive2那个Controller，但我不认为这真的是你想要的。你能不能把控制器移动到一个封闭的 div 上？然后directive2 实际上会继承控制器范围。

<div ng-controller="Controller">
    <div x-directive1>
        <div x-directive2> <p>directive2</p> </div>
    </div>
</div>
于 2013-09-27T17:22:28.690 回答