Scope Inheritance in Angular JS
In Angular, a scope is associated to an element, while an element is not necessarily directly associated with a scope. It is important to have a solid understanding of prototypical inheritance and differentiate the types of scopes. A child scope normally (prototypically) inherits from its parent scope, but not always. Scope inheritance is also normally straightforward, until 2-way data binding is required (i.e., ng- model) in the child scope. In that case, the child scope gets its own property that hides/shadows the parent property of the same name.
There are four types of scopes. The first one has “normal prototypical scope inheritance”; ng- include, ng-switch, ng-controller – create new scopes and inherit prototypically ( note that, ng- controller, however, is considered bad form for two controllers to share information via “scope inheritance.”), directive with scope: true. If more than one directive (on the same DOM element) requests a new scope, only one new child scope is created. Since we have “normal” prototypal inheritance, you want to be wary of 2-way data binding to parent scope primitives, and child scope hiding/shadowing of parent scope properties.
The second type has “normal prototypal scope inheritance with a cop y/assignment” – ng-repeat. Each item/ iteration of ng-repeat creates a new child scope, and that new child scope always gets a new property. Changing the child scope property’s value does not change the array the parent scope references.
The third type of scope and the one exception to the rule of inheritance is an “isolate scope” (created by directive with scope: {…}. Note, also, that, by default, directives do not create new scopes i.e., the default is scope: false so there is no inheritance there. Default is not a good choice for writing directives that are intended as reusable components.) An “isolate scope” is not prototypical but ‘=’, ‘@’, and ‘&’ provide a mechanism to access parent scope properties, via attributes. The object hash is used to set up two-way binding (using ‘=’) or one-way binding (using ‘@’) between the parent scope and the isolate scope. There is also ‘&’ to bind to parent scope expressions. So, these all create local scope properties that are derived from the parent scope. This construct is often the best choice when creating a “reusable component” directive, since the directive cannot accidentally read or modify the parent scope.
The last type is a “transcluded scope”- directive with transclude: true. The directive creates a new “transcluded” child scope, which prototypically inherits from the parent scope. The transcluded and the isolated scope are siblings – the $parent property of each scope references the same parent scope.
It’s important to remember that for all scopes (prototypal or not), Angular always tracks a parent- child relationship (i.e., a hierarchy), via properties $parent and $$ childHead and $$childTail.
In the case of a more complex scope inheritance, your workarounds should include three basic steps: 1) define objects in the parent for your mode, then reference a property of that object in the child: parentObj.someProp, 2) use $parent.parentScopeP roperty (where possible), and 3) define a function on the parent scope, and call it from the child.