Why don’t the AngularJS docs use a dot in the model directive?

by

That little dot is very important when dealing with the complexities of scope inheritance.

The egghead.io video “The Dot” has a really good overview, as does this very popular stack overflow question: What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

I’ll try to summarize it here:

Angular.js uses scope inheriting to allow a child scope (such as a child controller) to see the properties of the parent scope. So, let’s say you had a setup like:

<div ng-controller="ParentCtrl">
    <input type="text" ng-model="foo"/>
    <div ng-controller="ChildCtrl">
        <input type="text" ng-model="foo"/>
    </div>
</div>

(Play along on a JSFiddle)

At first, if you started the app, and typed into the parent input, the child would update to reflect it.

However, if you edit the child scope, the connection to the parent is now broken, and the two no longer sync up. On the other hand, if you use ng-model="baz.bar", then the link will remain.

The reason this happens is because the child scope uses prototypical inheritance to look up the value, so as long as it never gets set on the child, then it will defer to the parent scope. But, once it’s set, it no longer looks up the parent.

When you use an object (baz) instead, nothing ever gets set on the child scope, and the inheritance remains.

For more in-depth details, check out the StackOverflow answer

More Related Contents:

  1. AngularJs: How to check for changes in file input fields?
  2. How to access parent scope from within a custom directive *with own scope* in AngularJS?
  3. Difference between double and single curly brace in angular JS?
  4. How to deep watch an array in angularjs?
  5. How to preventDefault on anchor tags?
  6. Can you change a path without reloading the controller in AngularJS?
  7. Single page application – load js file dynamically based on partial view
  8. AngularJS ng-style with a conditional expression
  9. How to allow only a number (digits and decimal point) to be typed in an input?
  10. AngularJS best practices for module declaration?
  11. How can I test events in angular?
  12. What exactly do you do with the transclude function and the clone linking function?
  13. Using ui-router with Bootstrap-ui modal
  14. AngularJS watch DOM change
  15. How can I detect onKeyUp in AngularJS?
  16. Why ng-transclude’s scope is not a child of its directive’s scope – if the directive has an isolated scope?
  17. Filter by multiple columns with ng-repeat
  18. Recommended way of getting data from the server
  19. How to config routeProvider and locationProvider in angularJS?
  20. Should I care about W3C validation?
  21. Compare objects in Angular
  22. Rendering Highcharts using Angular js Directives
  23. Angularjs: a Service that serves multiple $resource urls / data sources?
  24. How do I prevent reload on named view, when state changes? AngularJS UI-Router
  25. Angular.js programmatically setting a form field to dirty
  26. How to detect browser using angularjs?
  27. When to use double braces {{}} in angularJS
  28. XMLHttpRequest cannot load and Response for preflight has invalid HTTP status code 405
  29. Prepend optional attribute in angular ui-router URL
  30. E2E mock $httpBackend doesn’t actually passThrough for me

Leave a Comment