Javascript angular指令导致模板的其余部分无法渲染-发生这种情况的可能原因是什么？

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

检查控制台日志和Batarang显示控制器已经执行。但是，对呈现的DOM的检查显示，模板的其余部分均未呈现

有趣的是，当我在模板底部插入此指令时，而不是像我之前所做的那样在顶部插入，原始模板确实会再次渲染，而

navTabs

指令位于底部

• 发生这种情况的可能原因是什么
• 有什么特别的事情我可以调查或督促吗

---

详情如下：

我将

添加到现有模板中

指令，

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;
            }
        };
    });

模板，

视图/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提出了一个问题，请参阅他们的回答：

更改

var App = angular.module('app');

到

---

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

• 好：

• 错误：

---

还有其他人被这种奇怪的行为缠住了。

很有趣。您能否提供指令所在模板的更多详细信息？例如，它本身是否是另一个指令的模板？该指令放置在模板中的何处？也许在另一个指令里面？你能发布包含指令的原始模板吗？@callmekatootie（1）不，另一个模板只是控制器的模板，由路由器直接调用。（2和3）本指令放在模板顶部时会导致此问题，而放在底部时不会导致此问题。（4） 不幸的是，这个模板相当大。我将尝试为此编写一个SSCCE。我以前声明过应用程序，这里仅引用它。这样做将宣布一个新的应用程序，并导致比我在这里提到的问题多得多！值得补充的是，在某些（大多数）情况下，angular在这种情况下不会提供错误消息。

var App = angular.module('app',[]);