AngularJS : When writing a directive, how do I decide if a need no new scope, a new child scope, or a new isolate scope? -

AngularJS : When writing a directive, how do I decide if a need no new scope, a new child scope, or a new isolate scope? -

i'm looking guidelines 1 can utilize help determine type of scope utilize when writing new directive. ideally, i'd similar flowchart walks me though bunch of questions , out pops right reply – no new new scope, new kid scope, or new isolate scope – asking much. here's current paltry set of guidelines:

don't utilize isolate scope if element utilize directive uses ng-model see ngmodel , component isolated scope , why formatters not work isolated scope? if directive doesn't modify scope/model properties, don't create new scope isolate scopes seem work if directive encapsulating set of dom elements (the docs "a complex dom structure") , directive used element, or no other directives on same element

i'm aware using directive isolate scope on element forces other directives on same element utilize same (one) isolate scope, doesn't severely limit when isolate scope can used?

i hoping angular-ui team (or others have written many directives) can share experiences.

please don't add together reply says "use isolate scope reusable components".

what great question! i'd love hear others have say, here guidelines use.

the high-altitude premise: scope used "glue" utilize communicate between parent controller, directive, , directive template.

parent scope: scope: false, no new scope @ all

i don't utilize often, @markrajcok said, if directive doesn't access scope variables (and doesn't set any!) fine far concerned. helpful kid directives only used in context of parent directive (though there exceptions this) , don't have template. template doesn't belong sharing scope, because inherently exposing scope access , manipulation (but i'm sure there exceptions rule).

as example, created directive draws (static) vector graphic using svg library i'm in process of writing. $observes 2 attributes (width , height) , uses in calculations, neither sets nor reads scope variables , has no template. utilize case not creating scope; don't need one, why bother?

but in svg directive, however, required set of info utilize , additionally had store tiny bit of state. in case, using parent scope irresponsible (again, speaking). instead...

child scope: scope: true

directives kid scope context-aware , intended interact current scope.

obviously, key advantage of on isolate scope user free utilize interpolation on attributes want; e.g. using class="item-type-{{item.type}}" on directive isolate scope not work default, works fine on 1 kid scope because whatever interpolated can still default found in parent scope. also, directive can safely evaluate attributes , expressions in context of own scope without worrying pollution in or harm parent.

for example, tooltip gets added; isolate scope wouldn't work (by default, see below) because expected utilize other directives or interpolated attributes here. tooltip enhancement. tooltip needs set things on scope utilize sub-directive and/or template , manage own state, quite bad indeed utilize parent scope. either polluting or damaging it, , neither bueno.

i find myself using kid scopes more isolate or parent scopes.

isolate scope: scope: {}

this reusable components. :-)

but seriously, think of "reusable components" "self-contained components". intent used specific purpose, combining them other directives or adding other interpolated attributes dom node inherently doesn't create sense.

to more specific, needed standalone functionality provided through specified attributes evaluated in context of parent scope; either one-way strings ('@'), one-way expressions ('&'), or two-way variable bindings ('=').

on self-contained components, doesn't create sense need apply other directives or attributes on because exists itself. style governed own template (if necessary) , can have appropriate content transcluded (if necessary). it's standalone, set in isolate scope say: "don't mess this. i'm giving defined api through these few attributes."

a best practice exclude much template-based stuff directive link , controller functions possible. provides "api-like" configuration point: user of directive can replace template! functionality stayed same, , internal api never touched, can mess styling , dom implementation much need to. ui/bootstrap great illustration of how because peter & pawel awesome.

isolate scopes great utilize transclusion. take tabs; not whole functionality, whatever inside of can evaluated freely within parent scope while leaving tabs (and panes) whatever want. tabs have own state, belongs on scope (to interact template), state has nil context in used - it's exclusively internal makes tab directive tab directive. further, doesn't create much sense utilize other directives tabs. they're tabs - , got functionality!

surround more functionality or transclude more functionality, directive already.

all said, should note there ways around of limitations (i.e. features) of isolate scope, @proloser hinted @ in answer. example, in kid scope section, mentioned interpolation on non-directive attributes breaking when using isolate scope (by default). user could, example, utilize class="item-type-{{$parent.item.type}}" , 1 time 1 time again work. if there compelling reason utilize isolate scope on kid scope you're worried of these limitations, know can work around virtually of them if need to.

summary

directives no new scope read-only; they're trusted (i.e. internal app) , don't touch jack. directives kid scope add functionality, not the only functionality. lastly, isolate scopes directives entire goal; standalone, it's okay (and "correct") allow them go rogue.

i wanted initial thoughts out, think of more things, i'll update this. holy crap - long answer...

ps: totally tangential, since we're talking scopes, prefer "prototypical" whereas others prefer "prototypal", seems more accurate rolls off tongue not @ well. :-)

angularjs angularjs-directive angularjs-scope