Does my ng-model really need to have a dot to avoid child $scope problems?

by

A lot of things introduce new scopes. Let’s say that in your controllers, you actually want to add tabs : first tab is actual rendering, second tab is the form (so that you have a real-time preview).

You decide to use a directive for that :

<tabs>
  <tab name="view">
    <pre>{{theText|formatInSomeWay}}</pre>
  </tab>
  <tab name="edit" focus="true">
    <input type="text" ng-model="theText" />
  </tab>
</tabs>

Well, know what ? <tabs> has its own scope, and broke your controller one ! So when you edit, angular will do something like this in js :

$scope.theText = element.val();

which will not traverse the prototype chain to try and set theText on parents.

EDIT : just to be clear, I’m only using “tabs” as an example. When I say “A lot of things introduce a new scope”, I mean it : ng-include, ng-view, ng-switch, ng-controller (of course), etc.

So : this might not be needed as of right now, because you don’t yet have child scopes in that view, but you don’t know whether you’re gonna add child templates or not, which might eventually modify theText themselves, causing the problem. To future proof your design, always follow the rule, and you’ll have no surprise then ;).

More Related Contents:

  1. ‘this’ vs $scope in AngularJS controllers
  2. AngularJS : Prevent error $digest already in progress when calling $scope.$apply()
  3. AngularJS access parent scope from child controller
  4. AngularJS 1.5+ Components do not support Watchers, what is the work around?
  5. How do I use $rootScope in Angular to store variables?
  6. $rootScope.$broadcast vs. $scope.$emit
  7. When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?
  8. AngularJS access scope from outside js function
  9. How do I inject a controller into another controller in AngularJS
  10. Sending event when AngularJS finished loading
  11. Confused about Angularjs transcluded and isolate scopes & bindings
  12. Rendering directives within $sce.trustAsHtml
  13. How to call a function from another controller in AngularJS? [duplicate]
  14. Directive isolate scope with ng-repeat scope in AngularJS
  15. AngularJS: ng-repeat list is not updated when a model element is spliced from the model array
  16. AngularJS : $q -> deferred API order of things (lifecycle) AND who invokes digest?
  17. AngularJS : ng-repeat filter when value is greater than
  18. angularjs share data config between controllers
  19. Call a method of a controller from another controller using ‘scope’ in AngularJS
  20. Angular scope function executed multiple times
  21. Why is using if(!$scope.$$phase) $scope.$apply() an anti-pattern?
  22. AngularJS $watch vs $watchCollection: which is better for performance?
  23. Typescript async/await doesnt update AngularJS view
  24. AngularJS controller inheritance
  25. AngularJS – Filter empty objects
  26. Why ng-scope is added to javascript inline of my partial view and makes alert not working?
  27. How to detect browser using angularjs?
  28. Binding inputs to an array of primitives using ngRepeat => uneditable inputs
  29. Access Parent Scope in Transcluded Directive
  30. scope and controller instantiation with ui router

Leave a Comment