I was trapped in angular directive this work, after struggled for hours, I noticed below traps in angular directive.
Directive with isolated scope will impact native angular directive
If your own directive has a isolated scope, then it will impact native angular directive, which means, sometime, ngModel, ngDisabled suddenly doesn’t work, because they’re impacted by your directive.
take below as an example:
We have a input field to type in a programming language, click the ‘Add’ button will add it into a list(as it’s a simple demo, so data validation is not concerned)
<bodyng-app="DemoApp"><divng-controller="DemoController"> What's your favorite programming language (up to five):
<inputtype="search"ng-model="profile.newLanguage"/><inputtype="button"value="Add"add-languagelanguages="profile.languages"new-language="profile.newLanguage"/><div><ul><ling-repeat="language in profile.languages"></li></ul></div></div></body>
we put a directive addLanuage on the button, which will get the value in the input field and add it to language list, due to we need to operate the language list, so we use a isolated scope to access it inside the directive.
As you can see from the code, we declare a new attribute needs-disabled which use reachThreshold() as it’s value, then we set needsDisabled to ng-disabled, the last thing is to declare the new attribute in directive’s scope, in this way, ngDisabled back again.
NO Multiple isolated scope
If you put more than one directive on a element, and each of them has a isolated scope, angular will fail and complain multiple isolated scope on one element.