AngularJS Error: $compile:multidir Multiple Directive Resource Contention

Question

I'm trying to separate part of my app into a directive, but keep getting this:

Multiple directives [tree (module: anbud), tree (module: anbud)] asking for template on: 

This can be caused by:

Multiple directives requesting isolated scope.
Multiple directives publishing a controller under the same name.
Multiple directives declared with the transclusion option.
Multiple directives attempting to define a template or templateURL.

I have an view that looks like this:

        <tree></tree>

The directive looks like this:

(function (module) {

    var tree = function () {

        return {
            restrict: "E",
            controller: "treeController",
            templateUrl: "/app/NSviewer/templates/parts/tree.html"
        };

    };

    module.directive("tree", tree);

}(angular.module("anbud")));

my controller is more complex:

(function () {
    'use strict';

    angular.module('anbud')
      .controller('treeController', ['$scope', 'api', '$log', 'localStorage', 'jwt', function ($scope, api, $log, localStorage, jwt) {

          // on successfull request
          function onJson(json) {

              //$scope.data = json;
              console.log($scope.data)

              // set default 
              $('#loading').hide();

              $scope.data = {};
              $scope.data[0] = {};
              $scope.data[0].c = "NS 3420";
              $scope.data[0].n = "2015";
              $scope.data[0].i = json.i;
              ;
          }

          // error getting json
          function onError(e) {

              console.log('error:');
              console.log(e);

              if (e.status === -1) {
                  throw 'Fikk ikke tak i server, sjekk internetforbindelsen din. [404]';
              } else if (e.status === 0) {
                  throw 'No connection. Verify application is running. [0]';
              } else if (e.status == 404) {
                  throw 'Fikk ikke tak i server, sjekk internetforbindelsen din. [404]';
              } else if (e.status == 401) {
                  throw 'Unauthorized [401]';
              } else if (e.status == 405) {
                  throw 'HTTP verb not supported [405]';
              } else if (e.status == 500) {
                  throw 'Internal Server Error [500].';
              } else {
                  throw 'Noe gikk galt. [' + e.status + ']';
              }
          }

          function onJsonPart(code, json) {

              console.log('Code: ' + code);
              console.log('json:');
              console.log(json);

              // validate JSON
              if (angular.isUndefined(json)) {
                  $log.error('Mottok ingen JSON for ns kode: ' + code);
                  console.log('Mottok ingen JSON for ns kode: ' + code);
                  return;
              }

              // check for code in root node in json 
              console.log('$scope.data:');
              console.log($scope.data);

              if (angular.isUndefined($scope.data)) {
                  $log.error('Scope data is not defined');
                  return;
              }

              // TODO: 
              // Skal enten være 26 eller 27, vet ikke om 'Felles bestemmelser' skal være med
              if (($scope.data[0].i.length !== 26 || $scope.data[0].i.length !== 27) === false) {
                  $log.error('NS koder er ikke lasted ned lokalt!');
                  return;
              }

              // loop gjennom layer 0 av treet
              // get object containing all ns codes
              var j = $scope.data[0];

              // layer 0
              for (var l0 = 0; l0 < j.i.length; l0++) {

                  // layer 1
                  for (var l1 = 0; l1 < j.i[l0].i.length; l1++) {

                      // fint node in tree
                      if (j.i[l0].i[l1].c === code) {

                          // append to tree
                          j.i[l0].i[l1].i = json.i;
                          return;
                      }


                  }
              }

              $log.error('Fant ikke NS kode: "' + code + '"');

          }

          // get json part to append to tree
          $scope.get = function (code) {

              // Kun layer 1, AB - AV, BE3 til BE8, CD, CH, CY etc
              if (code.length > 3 || code.length < 2) {
                  $log.error('NS kode ikke godkjent!');
                  return;
              }

              api.get(code)
                   .then(
                       function (json) {
                           onJsonPart(code, json);
                       },
                       function (error) {
                           onError(error);
                       }
               );
          };

          console.log('Getting JSON!');
          api.getFirstThreeLayers().then(onJson, onError);


      }]);

}());

No idea what might cause this problem..

Answer 1

This is probably caused when your application does include the Angular two times.

You should be seeing some warning in your browsers developer console that Angular has been initialized two times.

Verify the same in your HTML file where you are including the AngularJS file.

Another reason for this is also when you include some directive two times where those directives are creating either the isolated scope or trying to render a template.