When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?

I’m looking for some guidelines that one can use to help determine which type of scope to use when writing a new directive. Ideally, I’d like something similar to a flowchart that walks me through a bunch of questions and out pops the correct answer – no new new scope, new child scope, or new isolate scope – but that is likely asking for too much. Here’s my current paltry set of guidelines:

  • Don’t use an isolated scope if the element that will use the directive uses ng-model

    See Can I use ng-model with isolated scope? and
    Why formatters does not work with isolated scope?
  • If the directive doesn’t modify any scope/model properties, don’t create a new scope
  • Isolate scopes seem to work well if the directive is encapsulating a set of DOM elements (the documentation says “a complex DOM structure”) and the directive will be used as an element, or with no other directives on the same element.

I’m aware that using a directive with an isolated scope on an element forces all other directives on that same element to use the same (one) isolate scope, so doesn’t this severely limit when an isolate scope can be used?

I am hoping that some from the Angular-UI team (or others that have written many directives) can share their experiences.

Please don’t add an answer that simply says “use an isolated scope for reusable components”.

5 Answers
5

Leave a Comment