多个指令要求模板

Question

Error: [$compile:multidir] Multiple directives [statbox, statbox] asking for template on:

（在控制台上）

里面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 - 可以克隆和运行 spring 启用配置文件 "dev"。）

Answer 1

Error: [$compile:multidir] Multiple directives [statbox, statbox] asking for template on

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

你应该检查：

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

Answer 2

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

Answer 3

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

多个指令要求模板

Multiple directives asking for template on

javascript

angularjs

angularjs-directive

angular-template