javascript - angular 指令导致模板的其余部分无法呈现 - 这可能发生的可能原因是什么？

Question

当我将我的自定义指令添加到我现有页面之一的模板中时，该页面之前已正确呈现，但只有该指令呈现，而模板的其余部分则不呈现。

检查控制台日志和 Batarang 显示 Controller 已被执行。然而，对呈现的 DOM 的检查表明，模板的其余部分均未呈现。

有趣的是，当我将此指令插入模板的底部，而不是像我之前所做的那样插入顶部时，原始模板确实再次呈现，并且 navTabs指令在底部。

• 发生这种情况的可能原因是什么？
• 有什么特别值得我调查或研究的吗？

---

详细信息:

我添加 <nav-tabs />到现有模板。

指令，navTabs.js

   /* In charge of the navigation within the app */
    'use strict';    
    var App = angular.module('app');
    App.directive('navTabs', function() {
        var tabs = [
            {id:'x', title: 'Xx', url: '/x'},
            {id:'y', title: 'Yy', url: '/y'}
        ];
        return {
            restrict: 'E',
            templateUrl: 'views/navTabs.html',
            // scope: {},
            link: function(scope) {
                scope.tabs = tabs;
            }
        };
    });

模板，views/navTabs.html :

<ul class="nav nav-tabs">
    <li ng-repeat="tab in tabs">
        <a href="#{{tab.url}}">{{tab.title}}</a>
    </li>
</ul>

---

更新 (20140220):

有趣的是，我发现这样使用指令:

<nav-tabs />

...导致这种奇怪的行为，而使用这种形式:

<nav-tabs></nav-tabs>

当放置在模板顶部时，表现符合预期。当放置在模板底部时，使用哪种形式并不重要。

---

更新 (20140220):

在 github 上针对 angular 提出了一个问题，查看他们的回复:github.com/angular/angular.js/issues/6360

Answer 1

如 this github issue 中所述，当包含您自己的指令时，使用“void 标记”是不可能的。 .

• 好:<my-directive></my-directive>
• 差:<my-directive />

HTH 其他任何被这种奇怪行为困扰的人。