HTML:
<div ng-app="myApp" ng-controller="Controller">
<test ng-if="toggle" props="condition"></test>
</div>
Javascript:
var myApp = angular.module('myApp', []);
myApp.controller('Controller', ['$scope', '$timeout', function($scope, $timeout) {
$scope.condition = [true];
$scope.toggle = $scope.condition[0];
$scope.$watch('condition', (newv, oldv, scope) => {
console.log('old: ' + oldv);
console.log('new: ' + newv);
console.log('toggle: ' + scope.toggle);
}, true);
}]);
myApp.directive("test", function() {
return {
template: '<div>directive show</div>',
replace: true,
scope: {
props: "="
},
controller: ['$scope', '$timeout', function($scope, $timeout) {
$scope.props[0] = false;
}]
}
});
The situation occurs when the value of condition[0] is altered to false by the directive, where I observe the updated value in the console log. However, the variable toggle fails to update.
The issue at hand is:
Why does toggle not reflect the change when condition[0] is modified? What is the reason behind the digest cycle's failure to update toggle when its assigned value changes?
I am primarily seeking an explanation for this problem rather than a direct solution.
Thank you!