要求模板的多个指令

时间:2017-03-27 20:40:50

标签: javascript angularjs angularjs-directive angular-template

  

错误:[$ 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”。)

3 个答案:

答案 0 :(得分:8)

  

错误:[$ compile:multidir]多个指令[statbox,statbox]   在

上要求模板

当您在index.html中包含.js两次并且绑定指令时编译器不知道要选择哪个模板时,很可能会发生此错误。

你应该检查:

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

答案 1 :(得分:2)

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

答案 2 :(得分:1)

我在使用Typescript时遇到了这个问题。我重命名了一些ts文件和visual studio(2015)保留了旧生成的js文件。不知何故,angular使用了新旧js文件,我最终得到了这个错误。我做了一个干净的(删除了所有生成的js文件),构建并且工作正常!