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

Question

我正在尝试弄清楚如何正确使用带有嵌入和 ^require 的嵌套指令。我想让一个外部指令有一个由嵌套子指令更新的变量，但我希望所有子指令都链接到该变量。我写了一个非常简单的例子来演示这个问题

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 部分

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

child.html 部分

<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': {}。可能是通过创建隔离范围，您的子指令无法访问父控制器范围。