javascript - Difference between child and isolated scopes in directives -


i trying understand scopes in angularjs directives. gather there 3 types:

  1. scope inherited parent controller
  2. child scope (scope: true)
  3. 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

Popular posts from this blog

php - Invalid Cofiguration - yii\base\InvalidConfigException - Yii2 -

How to show in django cms breadcrumbs full path? -

ruby on rails - npm error: tunneling socket could not be established, cause=connect ETIMEDOUT -