Variable watch does not fire unless is an array - angularjs

Question

I have the following markup:
<div ng-controller="DataController as vm">
<div ng-repeat="name in vm.users track by $index">
{{name}}
</div>
<form name="form" validation="vm.errors">
<input validator ng-model="vm.name" name="vm.name" placeholder="name" type="text" />
Add
</form>
</div>
I have the following controller:
function DataController($scope) {
var vm = this;
vm.name = "Mary";
vm.users = ["Alice", "Peter"];
vm.errors = 1;
vm.add = function(name) {
vm.errors++;
vm.users.push(name);
}
}
Every time I add a user I increase the value of errors.
I need to watch this variable inside a directive so I have:
app.directive("validation", validation);
function validation() {
var validation = {
controller: ["$scope", controller],
restrict: "A",
scope: {
validation: "="
}
};
return validation;
function controller($scope) {
this.errors = $scope.validation;
}
}
app.directive("validator", validator);
function validator() {
var validator = {
link: link,
replace: false,
require: "^validation",
restrict: "A"
};
return validator;
function link(scope, element, attributes, controller) {
scope.$watch(function() {
return controller.errors;
}, function () {
console.log(controller.errors);
});
}
The console.log shows the initial value but not new values:
https://jsfiddle.net/qb8o006h/2/
If I change vm.errors to an array, add the values, and watch its length then it works fine:
https://jsfiddle.net/nprx63qa/2/
Why is my first example does not work?

Answer 1

I update your code, you can access to the property scope.vm.errors which is updated, if you debug the code, you will see that the property controller.errors is not updated (after each digest all the watches are called to re-evaluate them). If you access the property errors from the scope you can add the $scope.$watch and make it work. However I would not recommend to have a $scope.$watch inside a directive. But that's up to you :
var app = angular.module('app', []);
app.controller("DataController", DataController);
function DataController($scope) {
var vm = this;
vm.name = "Mary";
vm.users = ["Alice", "Peter"];
vm.errors = 1;
vm.add = function(name) {
vm.errors++;
vm.users.push(name);
}
}
app.directive("validation", validation);
function validation() {
var validation = {
controller: ["$scope", controller],
restrict: "A",
scope: {
validation: "="
}
};
return validation;
function controller($scope) {
this.errors = $scope.validation;
}
}
app.directive("validator", validator);
function validator() {
var validator = {
link: link,
replace: false,
require: "^validation",
restrict: "A"
};
return validator;
function link(scope, element, attributes, controller) {
scope.$watch(function() {
return scope.vm.errors
}, function () {
console.log(scope.vm.errors);
});
}
}
https://jsfiddle.net/kcvqn5kL/

Answer 2

In both of your examples inside validation directive controller you assign errors property a reference to $scope.validation value.
In the first example the value is numeric and thus immutable - 1 - the reference value cannot be modified. The vm.add modifies property value of the controller instance. The change is then propagated to validation directive $scope.validation but not to the validation directive controller instance $errors property.
In the second example the value is an array and thus mutable - [] - the reference value can be modified. The vm.add does not modify property value of the controller instance. Thus the validation directive controller instance errors property value is the very same Array instance - hence it's length changes.
One way to use a immutable value (as in your first example) is to $watch a controller function as in this example:
function link(scope, element, attributes, controller) {
scope.$watch(controller.errors, function (newValue) {
console.log(newValue);
});
}
Where controller.errors is defined as follows:
function controller($scope) {
this.errors = function(){ return $scope.validation; };
}
You can find the following answer(s) useful:
Why form undefined inside ng-include when checking $pristine or $setDirty()?