The problem with the dot (as I understand it) is that child scopes work by
prototypally inheriting from parent scopes.
So if you have a situation where you've got a scope property, let's call it
$scope.tuber = 'potato', and you've got some child scopes which access the
same tuber property. If they just read the property, it's no big deal. But
if a child scope sets the tuber property = 'carrot', in the child scope
that will just set the tuber property directly on the child scope (as well
it should with prototypal inheritence).
If, however, there was $scope.vegetables = {tuber: 'potato'} and a child
scope sets $scope.vegetables.tuber = 'carrot', then the javascript runtime
will find the vegetables object on the parent scope and set the tuber
attribute of vegetables (so vegetables.tuber will be carrot in all child
scopes).
If at any time in a child scope you end up doing $scope.vegetables =
{tuber: 'beet'}, you'll break prototypal inheritance just like you would if
you had done it the other way. The child scope will get the new field
direct on its object, and not look up the prototype chain to find its
parent.
Generally, I try to just put all my scope-relevant view variables
(collapsed this or searchfield that) in a $scope.view object that I create
in all my controllers, so I'm always doing view.tuber = 'potato', and I
never set $scope.view directly outside of its initialization (which I will
do with a conditional initialization). In coffeescript it looks like
$scope.view ?= {}
$scope.view.tuber = 'potato'
$scope.view.planted = true
$http.get('http://potatoes.com/api/potato/1').then (potato)->
$scope.view.tuberModel = potato
etc etc.
On Fri, Oct 10, 2014 at 12:25 AM, Łukasz Bachman <[email protected]>
wrote:
> Hi guys!
>
> Some time ago I watched the Angular Best Practices Video
> <https://www.youtube.com/watch?v=ZhfUv0spHCY&list=TL3Td3jaA2QI3oyh7s50-KGGIKzwhR9Dr->
> where Miško Hevery make the following, very important statement: "Scope
> is not the model, scope has references to the model". Later he also states
> that "(when)... using ng-model, there's got to be a dot in there somewhere".
>
> So recently I'm applying this rule to my model and developed a habit of
> creating a *"$scope.model = {}"* object which is then populated with
> whatever is necessary in the view. For instance, to show selectable list of
> users I might write:
>
> *$scope.model = {*
> * users: [ { id: 1, username: "Łukasz Bachman", age: 29 }, { id: 2,
> username: "John Doe", age: undefined } ],*
> * selectedUserId: undefined*
> *};*
>
> And then ofcourse I iterate over *ng-repeat="user in model.users"* and
> create some click handler like so: *ng-click="model.selectedUserId =
> user.id <http://user.id>".*
>
> This looks fine for me and haven't found any issues with this approach so
> far. But lately the first sentence that I quoted has been
> constantly roaring in my head. Am I really using it right? Perhaps I should
> only keep references to the model there, not attach the data to this
> universal "model" container! An example:
>
> *var usersArray = [ { id: 1, username: "Łukasz Bachman", age: 29 }, { id:
> 2, username: "John Doe", age: undefined } ];*
> *var selectedUserId = undefined;*
>
> *$scope.model = {*
> * users: usersArray,*
> * selectedUserId: selectedUserId*
> *};*
>
> Can anyone tell me if this is having any benefits over my current
> approach? I'm most interested in:
>
> - does either of the solutions hides some bugs or flaws?
> - is the overhead of watching the scope is higher/lower in any case
> (performance implications)?
> - is there any recommended way of doing this?
>
> If you have some references that explain this in depth, then please let me
> know. I'll be glad to read and learn more about it, but if some of Angular
> Masters can simply say "you are doing it wrong/right" then I'd highly
> appreciate it.
>
> Thanks!
>
> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To post to this group, send email to [email protected].
> Visit this group at http://groups.google.com/group/angular.
> For more options, visit https://groups.google.com/d/optout.
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
