多个指令要求模板答案

【问题标题】：Multiple directives asking for template on多个指令要求模板
【发布时间】：2017-03-27 20:40:49
【问题描述】：

错误：[$compile:multidir] 多个指令 [statbox, statbox] 要求模板：

（在控制台上）

在index.html

里面

<script src="js/dashboard/dashboard.module.js"></script>
<script src="js/dashboard/dashboard.component.js"></script>
<script src="js/dashboard/statbox.component.js"></script>

内部 dashboard.module.js

var dashboardModule = angular.module('dashboard', ['ngRoute']);

内部 dashboard.component.js

angular.module('dashboard').component('dashboard', {
templateUrl: 'templates/dashboard/dashboard.template.html',
controller: ['$scope', '$routeParams', '$http', '$rootScope', '$log', function DashboardController($scope, $routeParams, $http, $rootScope, $log) {
    ...stuff NOT REFERENCING STATBOX by any means...
}]
});

在statbox.component.js

里面

angular.module('dashboard').component('statbox', {
templateUrl: 'templates/dashboard/statbox.template.html',
controller: ['$http', '$rootScope', '$log', function StatboxController($http, $rootScope, $log) {
    ... some random get request ...
}]
});

在app.js

里面

var app = angular.module('buttonMasher', ['ngRoute', 'dashboard', ...]);

在dashboard.template.html

里面

    ... stuff ...
    <div id="history">
        ... stuff ...

        <p><b>Statbox</b></p>
        <statbox></statbox>
    </div>

内部statbox.template.html

<div id="statbox">
<p>{{$ctrl.statboxText}}</p>

我做错了什么，为什么会出现这个多指令错误？

每当我注释掉<script src="js/dashboard/statbox.component.js"></script> 从 index.html 一切正常，但没有加载 statbox 控制器。

（完整项目在这里：Github: carloworks/masher - 可以在启用配置文件“dev”的情况下克隆和运行 spring。）

【问题讨论】：

请在调用这两个组件的地方添加 html 代码
@Karim 已编辑，对不起我的错

标签： javascript angularjs angularjs-directive angular-template

【解决方案1】：

错误：[$compile:multidir] 多个指令 [statbox, statbox] 求模板

很可能是因为您在 index.html 中包含了两次 .js，而编译器在绑定指令时不知道选择哪个模板。

你应该检查：

编译后的html页面，看看你是否包含了两次statbox.js
确保您的代码中没有多个位置定义相同的.component('statbox',{})

【讨论】：

我没有包含两次任何 js 文件
我说的是 statbox .js 文件
所以我应该删除它并且只包含仪表板？那么statbox的控制器是如何工作的呢？
不要只关注 stabox 组件，应该检查代码中 .component('statbox' 的所有出现，在我看来你包含了两次 js 或声明了两次组件
为我工作.. 谢谢。两次错误包含js

【解决方案2】：

在这里聚会迟到了，但在我的情况下，它发生了，因为我愚蠢地将指令命名为与传递给它的变量相同的东西，所以当使用指令时它试图递归地包含自己！

【讨论】：

是的。这就是帮助我弄清楚这一点的原因。在我的情况下，另一个开发人员设置了一个指令，并在他的范围设置中使用了确切的指令名称。所以这可能和你的问题一样。

【解决方案3】：

我在使用 Typescript 时遇到了这个问题。我重命名了一些 ts 文件，Visual Studio (2015) 保留了旧生成的 js 文件。不知何故，angular同时使用了新旧js文件，我最终得到了这个错误。我做了一个清理（删除了所有生成的 js 文件），构建并且它工作了！

【讨论】：