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: 
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
> 
> 
>
I was getting this error for a reason not specified in other answers.
I was using declaration for xyz directive as `<xyz xyz="xyz"></xyz>`

my definition was: 

```
  angular.module('app')
  .directive('xyz', function () {
    return {
      templateUrl: '..../xyz.html',
      restrict: 'EA',
      scope: {
        xyz: '='
      },
      link: function (scope, element, attrs) {
      }
    };
  });

```

The problem here is that I allowed directive to be used as element and attribute. so `<xyz xyz="xyz"></xyz>` contained both the declaration which was causing the issue. 

**Solution is to either restrict the directive to be used as Element only `restrict: 'E'` OR change the name of the directive to something like xyzView and use it like `<xyz-view xyz="xyz"></xyz-view>`.**