According to https://github.com/angular/angular.js/wiki/Understanding-Scopes, it's a problem to try to data-bind to primitives attached to your $scope
:
Scope inheritance is normally straightforward, and you often don't even need to know it is happening... until you try 2-way data binding (i.e., form elements, ng-model) to a primitive (e.g., number, string, boolean) defined on the parent scope from inside the child scope. It doesn't work the way most people expect it should work.
The recommendation is
This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your ng-models
Now, I have this very simple setup which violates these rules:
HTML:
<input type="text" ng-model="theText" />
<button ng-disabled="shouldDisable()">Button</button>
JS:
function MyController($scope) {
$scope.theText = "";
$scope.shouldDisable = function () {
return $scope.theText.length >= 2;
};
}
Is this really bad? Is this going to screw me over in some horrible way when I start trying to use child scopes, somehow?
Do I need to change it to something like
function MyController($scope) {
$scope.theText = { value: "" };
$scope.shouldDisable = function () {
return $scope.theText.value.length >= 2;
};
}
and
<input type="text" ng-model="theText.value" />
<button ng-disabled="shouldDisable()">Button</button>
so that I follow the best practice? What concrete example can you give me where the latter will save me from some horrible consequence that would be present in the former?