I am interested in monitoring the changes of an object, referred to as x, specifically its properties which are checkboxes. When a user checks a box, it alters the checked property (prop1) to 1.
Each property contains certain content, and when enabled, it should expand the height of the containing element to accommodate that new content.
$scope.x = {
prop1: 0,
prop2: 0,
prop3: 0,
prop4: 0,
};
I have set up a watch function to track any modifications made to x. If there are changes, the element's height is adjusted:
$scope.$watchCollection('x', function(embed){
$scope.x.height = $scope.getHeight();
});
The method getHeight is invoked, triggering checkOptions() to add specified buffer space to the element:
$scope.getHeight = function () {
$scope.checkOptions();
return Math.ceil(($scope.totalElements / $scope.totalCols) * elementHeight);
};
$scope.checkOptions = function () {
if ($scope.x.prop1 === 1) {
elementHeight += 50px;
}
...other properties
The HTML includes a checkbox for detecting true/false values:
<fieldset class="modal-checkbox">
<input type="checkbox"
id="element-prop1"
ng-model="x.prop1"
ng-true-value="1"
ng-false-value="0">
<label for="element-prop1">
<span>Element Prop 1</span>
</label>
</fieldset>
Upon clicking the checkbox, it continuously increases the height until:
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [[{"msg":"fn: regularInterceptedExpression","newVal":39,"oldVal":38},{"msg":"fn: expressionInputWatch","newVal":"6168","oldVal":"6006"}],'
After researching Angular $watchCollection, it appears to serve my purpose correctly by monitoring the collection within the x object for changes...
and according to $digest:
It processes all watchers of the current scope and its children. Since a watcher's listener can alter the model, $digest() keeps calling the watchers until no more listeners are triggered. This could lead to an infinite loop.
I am uncertain why I am experiencing this looping issue.