Angularjs Multiple directives [gridsection, gridsection] asking for template on: <div gridsection="">

Question

I'm receiving the error: Multiple directives [gridsection, gridsection] asking for templateon : <div gridsection=""> with this code.

I don't see how i'm using nested directives or what is causing this.

html page

<div gridsection ></div>

directive

angular.module('web').directive('gridsection', function() {
    return {
        restrict: 'A',
        replace: false,

        scope: {
      patient: "=patient"
        },
        templateUrl: 'directive/section.html',
        link: function(scope, element, attrs, fn) {


        }
    };
});

directive/section.html

<div>
  here?
</div>

Answer 1

It seems like you are declaring the gridsection multiple times in your angular code.

Answer 2

I have seen this before when I have a copy of a directive script file in a folder.

i.e. my file structure was

* myDirective.js
* myDirective - copy.js

So essentially I had two directives with the same name.

Doh!

Note originally posted this as a comment but created as an answer in response to comment from @jayjayjay

Answer 3

For posterity, I was getting this exception because I was trying to create a directive named pager and that was colliding with Bootstrap's pager.

Answer 4

Make sure you didn't include the script tag twice.

I had this issue but only declared the directive once in the markup, turns out it was because I included the script twice.

Note: I saw this in one of the comments for another answer and posted it as an answer for easier access/to prevent it getting lost.