指令可能发生冲突？

Question

目标

一次运行两个指令。

问题

我的link指令中的category片段没有调用/工作。

详细

这是你的指示：

app.directive('navigators', function() {
    return {
        restrict: 'E',
        transclude: true,
        scope: {},
        controller: function($scope) {
            var categories = $scope.categories = [];

            this.add = function(category) {
                categories.push(category);
            };
        },
        templateUrl: 'navigators/structure.volt'
    };
}).directive('category', function() {
    return {
        require: '^navigators',
        transclude: true,
        restrict: 'E',
        scope: {
            name: '@'
        },
        link: function(scope, element, attributes, navigatorsController) {
            console.log('Performing some tests.');
        }
    };
});

我使用这些指令的HTML：

<navigators>
    <category name="Home">
        <!-- things goes here -->
    </category>
    <category name="Downloads">
        <!-- other things goes here -->
    </category>
</navigators>

最后，structure.volt（普通的HTML标记）：

<nav>
    <ul>
        <li ng-repeat="category in categories">
            {{category.name}}
        </li>
    </ul>
</nav>

诊断

• 浏览器（Chrome）控制台中未显示任何错误消息;
• structure.volt内的所有内容都在显示，除了 - 显然 - ng-repeat内的内容;
• 当我从第一个指令（templateUrl）中删除navigators时，我可以看到“执行一些测试”。在控制台上。

游乐场

伙计们，我无法为你提供问题的动态示例，因为我的案例使用templateUrl，我认为没有机会在jsFiddle上使用它。

Answer 1

您需要指定应在structure.volt模板中插入已转换内容的位置，例如

<nav>
    <ul>
        <li ng-repeat="category in categories">
            {{category.name}}
        </li>
    </ul>
</nav>
<div ng-transclude></div>