Question

我试图弄清楚如何正确使用嵌套指令和transclusion，以及^ require in angular。我想让一个outter指令有一个变量，它由嵌套的子指令更新，但是我希望所有的子节点都链接到那个变量。我写了一个非常简单的例子来演示问题

JS

(function () {
    'use strict';

    angular
        .module('app')
        .directive('test', test);

    function test() {
        var directive = {
            bindToController: true,
            controller: testController,
            'controllerAs': 'testController',
            scope: {},
            templateUrl: 'scripts/test/test.html',
            transclude: true
        };
        return directive;
    }

    function testController() {
        var self = this;
        self.childCount = 0;

        self.addChild = function addChild(child) {
            self.childCount++;
            child.childNumber = self.childCount;
        }
    }

})();


(function () {
    'use strict';

    angular
        .module('app')
        .directive('child', child);

    function child() {
        var directive = {
            'scope': {},
            'link': link,
            'templateUrl': 'scripts/test/child.html',
            'transclude': true,
            'require': '^test'
        };
        return directive;

        function link(scope, element, attrs, testController) {
            scope.childNumber = null;
            testController.addChild(scope);
        }

    }

})();

主要HTML调用

<test>
    <child></child>
    <child></child>
    <child></child>
</test>

test.html partial

<h1>self.childCount = {{testController.childCount}}</h1>
<div ng-transclude></div>

child.html partial

<h3>I am child {{childNumber}} out of {{testController.childCount}}</h3>

输出（和问题）

self.childCount = 3
I am child 1 out of 
I am child 2 out of 
I am child 3 out of

如您所见，child.html输出不知道如何输出{{testController.childCount}}。什么是错误的任何想法？

Answer 1

我通常不会使用controllerAs语法，但可能会尝试从子范围中删除'scope': {}。可能是通过创建隔离范围，您的子指令无法访问父控制器范围。

带有^ require的Angular指令 - 访问父范围？

1 个答案: