If you are not using a .(dot) in your AngularJS mo

Question

I remember seeing this famous quote from a video on AngularJS saying that should be always using a . (dot) in your models.

Well I am trying to follow this say I have

   var item = {}
   item.title = "Easy Access to support";
   item.available = true;
   item.price = 31.67;

So this works great in my view i do

  {{ item.title }}
  {{ item.available }}

I am using a dot so I think this is good.

But I have some properties that I don't consider part of the model but maybe I am wrong. For example I have a property I use to enable or disable a button using the ng-disable, I have entered this using dot format. Its basically entered like so

 $scope.disableButton = true;

and I use it like

 ng-disable="disableButton"......

Should I make this part of the model "item" ? or create another js object just so i can hold this property using a dot ?

Anybody know if this acceptable or should I be doing everything (even these simple properties) with a .dot ??

Thanks

Answer 1

The "there should always be a dot in your model" refers to ngModel. This directive does two-way binding. If you two-way bind to a primitive (such as a Boolean in your case), the setter will set it on the current scope rather than the scope on which it is defined, which can cause a headache when you have a large user-interface with a lot of child scopes. It does not refer to other directives such as ngDisable. See this explanation for more details on this specific issue.

Sample scenario: a parent scope with $scope.foo = "bar", and a child scope with a <input type="text" data-ng-model="foo">. It will display bar initially, but once the user changes the value, a foo will be created on the child scope and the binding will read and write that value. The parent's foo will remain bar. Hope that summarises it well.

So for ngModel purposes, you might have to create an object to work around such binding issues, but for any other directive you should have the regular, logical grouping.