Multiple directives asking for template on

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

(On console)

Inside 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>

Inside dashboard.module.js

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

Inside 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...
}]
});

Inside 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 ...
}]
});

And inside app.js

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

Inside dashboard.template.html

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

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

Inside statbox.template.html

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

What am I doing wrong and why do I get this multiple directives error?

Whenever I comment out <script src="js/dashboard/statbox.component.js"></script> from the index.html everything works but statbox controller is not getting loaded.

(Full project is here: Github: carloworks/masher – One can clone and run spring with profile “dev” enabled.)

Answer

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

Most likely it’s because you included the .js twice in your index.html and the compiler at the time of binding the directive doesn’t know which template to choose.

you should check:

• the compiled html page to see if you included twice statbox.js
• make sure you don’t have multiple spots in your code where you define the same .component('statbox',{})