How Does Prototypal Inheritance Work in AngularJS Scopes, and What are the Common Pitfalls?

What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

Prototypal Inheritance in JavaScript

• Prototypal inheritance is a mechanism where an object inherits properties from its prototype.
• In AngularJS, scopes normally prototypically inherit from their parent scopes.

Exceptions

• Directives with scope: { ... } create isolate scopes that do not prototypically inherit from their parents.

Nuances

Child Scope Property Hiding

• Normally, changes to child scope properties do not affect parent scope properties.
• However, when binding 2-way data to a primitive in the parent scope from a child scope, the child scope creates its own property that hides the parent property of the same name.

Solutions

• Use objects for primitives in the parent scope (e.g., parentObj.someProp).
• Use $parent.parentScopeProperty.
• Define a function in the parent scope and call it from the child.

Ng-repeat

• Ng-repeat creates child scopes and assigns item values to new properties on those child scopes.
• Binding to primitives in parent scope arrays from ng-repeat child scopes results in child scope properties that are independent of the parent array.
• To avoid this, use an array of objects in the parent scope and bind to object properties in the ng-repeat.

Isolate Scopes

• Created by directives with scope: { ... }.
• Do not prototypically inherit from parent scopes.

• Use attributes to bind parent scope properties to isolate scope properties:

  • = for two-way binding
  • @ for one-way binding
  • & for expression binding

Transcluded Scopes

• Created by directives with transclude: true.
• Prototypically inherit from parent scopes.
• Sibling to isolate scopes if both exist in a directive.

Summary

• Most scopes prototypically inherit from parent scopes.
• Exceptions exist, such as isolate scopes created by directives.
• Nuances to be aware of include child scope property hiding and special considerations for ng-repeat.

The above is the detailed content of How Does Prototypal Inheritance Work in AngularJS Scopes, and What are the Common Pitfalls?. For more information, please follow other related articles on the PHP Chinese website!