未调用嵌套指令链接函数，控制器未确认

Question

我提前道歉：有一个'mah指令链接功能未被调用！ SO中的函数，但没有一个答案适用于我。

我有一个指令sgMapHeader嵌套在另一个指令sgMap中。 sgMapHeader是可选的，所以我追加它并在sgMap的链接时编译。两者共用一个控制器。 Here is a highly reduced JSBin.

在一个完美的世界里，我会期待两件事：

1. 将调用内部指令的链接函数，并记录“hi there”。
2. 如果我点击'hi there'文字，将会记录'hold'。

不幸的是，两者都没有发生。我尝试了各种范围但没有任何改进。我错过了什么？

Answer 1

sgMapCtrl 未定义

controllerAs:'sgMapCtrl',

在你的sgMap指令

中

此代码适用于我：

修改

angular.module('map.directive', [])
.directive('sgMap', ['$compile', function($compile) {
    return {
        replace: false,
        template: '<section class="md-whitespace-2"></section>',
        scope: {
            header: '=header',                 // Whether to show the header. (bool)
        },
        restrict: 'E',
        controllerAs:'sgMapCtrl',
        controller: [function() {
            this.changeAction = function(action) {
                console.log(action);
            };
        }],
        link: function(scope, element, attrs) {
            // Add header?
            if (scope.header) {

                $compile('<sg-map-header></sg-map-header>')(scope, function(cloned, scope) {
                    element.append(cloned);
                });
            }
        }
    };
}])
.directive('sgMapHeader', [function() {
    'use strict';

    return {
        replace: false,
        restrict: 'E',
        require: '^sgMap',
        scope: false,
        template: '<div ng-click="sgMapCtrl.changeAction(\'hold\')">hi there</div>',
        link: ['$scope', 'sgMapCtrl', function($scope, sgMapCtrl) {
            sgMapCtrl.changeAction('<div>hi there</div>');
        }]
    };
}]);

angular.module('app', ['map.directive']);

Answer 2

首先附加到DOM，然后编译。

        // Add header?
        if (scope.header) {
            var $header = angular.element('<sg-map-header></sg-map-header>');
            element.append($header);
            $compile($header)(scope);
        }

sgMapDirective必须是编译时 time 的sgMap的子代。否则，当编译搜索sgMapDirective的父元素时，它找不到任何内容，因为它只存在于内存中。不是DOM。