javascript - Difference between child and isolated scopes in directives -
i trying understand scopes in angularjs directives. gather there 3 types:
- scope inherited parent controller
- child scope (
scope: true
) - isolated scope (
scope: {}
)
i understand first one. second one, 'child scope' defined as:
scope prototypically inherited parent controller
and 'isolated scope' defined
scope specific directive , not inherited parent controller
in layman terms, difference between 'child scope' , 'isolated scope'? what respective use cases?
with respect type of scope use, here of guiding principles follow. knowledge stem looking number of angular , third party directives
use parent scope if need add behaviour existing dom elements, ng-click
, ng-show
, ng-class
examples of it. these directives not come own template ui extend behaviour of exiting html elements.
use scope:true
, or child scope when directive plans add new properties on scope , not want pollute parent scope such properties. few angular directive it, ng-repeat
creates child scope each iterated element , exposes properties on child scope $index
. suggest when creating directives @ least create this.
isolated scope created using scope:{}
used true components input directive explicit through scope property , not affect parent scope directly. helps create truely self contained reusable directive. there challenges isolated directive such 2 isolated directives cannot applied on same html element, need aware of.
regarding nuances of scope inheritance, have read https://github.com/angular/angular.js/wiki/understanding-scopes there no way out.
hope helps.
Comments
Post a Comment