多个指令要求模板

Question

错误：[$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>

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

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

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

Answer 1

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

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

你应该检查：

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

Answer 2

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

Answer 3

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