Over the last two months, I've tried to demonstrate how powerful it is that AngularJS allows you to bind a single directive to multiple compilation and linking functions. Not only does this allow you to bind to different priorities on the same element, it also allows you to share elements, like the Script tag. The flip-side to this coin, however, is that if you accidentally define a directive twice, your application may start to break in a way that seems nonsensical.
Having nothing to do with the features that I mentioned above, we recently had a strage merge-conflict that broke our staging environment. One of the QA (Quality Assurance) engineers reported that nothing was loading. And, when I pulled it up in my browser, indeed, the entire AngularJS application was breaking.
Multiple directives [loading, loading] asking for new/isolated scope.
Two months ago, I would have looked at this and been completely baffled! But, thankfully, I just happened to be digging into AngularJS' ability to define a directive multiple times. As such, I had a hunch that "loading" was being defined twice and, therefore, being linked twice on the same element.
NOTE: While not the point of this post, this is a good reminder that if you believe that you should "isolate all the scopes," you're doing it wrong.
To help others debug, I wanted to put together a small example of this. Notice that in this code, the "bnThing" directive is "accidentally" being included twice:
And, here is the bnThing directive definition:
Multiple Directive Resource Contention
Multiple directives [bnThing, bnThing] asking for new/isolated scope on:
The problem is that bnThing is being linked twice on the same element. When I remove the accidentally-duplicated Script tag, the error goes away and the page functions as expected. Hopefully this will help you debug the problem if you ever find yourself with this seemingly insane error message.
Want to use code from this post? Check out the license.