Multiple directives asking for template on

Question

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 1

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',{})

Answer 2

I had this issue with Typescript. I renamed some ts files and visual studio (2015) kept the old generated js files. Somehow, angular used both new and old js files, and I ended up with this error. I did a clean (which deletes all generated js files), build and it worked!

Answer 3

Late to the party here but in my case it happened because I stupidly named the directive the same thing as the variable that was being passed into it so when the directive was being used it was trying to recursively include itself!