Error: [$pile: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/dashboardponent.js"></script>
<script src="js/dashboard/statboxponent.js"></script>

Inside dashboard.module.js

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

Inside dashboardponent.js

angular.module('dashboard')ponent('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 statboxponent.js

angular.module('dashboard')ponent('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 ment out <script src="js/dashboard/statboxponent.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.)

Error: [$pile: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.ponent.js"></script>
<script src="js/dashboard/statbox.ponent.js"></script>

Inside dashboard.module.js

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

Inside dashboard.ponent.js

angular.module('dashboard').ponent('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.ponent.js

angular.module('dashboard').ponent('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 ment out <script src="js/dashboard/statbox.ponent.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.)

• javascript
• angularjs
• angularjs-directive
• angular-template

Share Improve this question Follow edited Mar 27, 2017 at 21:00 Jue Debutat asked Mar 27, 2017 at 20:40 Jue DebutatJue Debutat 36711 gold badge33 silver badges1313 bronze badges 2

• please add the html code where you invoke both the ponents – Karim Commented Mar 27, 2017 at 20:56
• @Karim edited, sorry my bad – Jue Debutat Commented Mar 27, 2017 at 21:00

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 12

Error: [$pile: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 piler at the time of binding the directive doesn't know which template to choose.

you should check:

• the piled 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 .ponent('statbox',{})

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!

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!