Within my AngularJS application, I have observed that the DOM refreshes each time a function is called, even if no $scope variables have been altered by that function.
I am utilizing an ng-repeat directive to generate a series of checkboxes, as demonstrated in the code snippet below.
HTML
<a ng-click="someFunction()" >Some Function</a>
<form action="/settings/save">
<label>
<input ng-repeat="option in settings.active" name="options[]" value="{{option}}" checked="checked" />
{{option}}
</label>
<input type="submit" value="Save" />
</form>
JS
angular.module("myapp")
.controller("settingsCtrl", function($scope, $loadServ){
//$loadServ is a service for fetching data from the server
$loadServ("/settings/load")
.success(function(response){$scope.settings = response.data});
$scope.someVariable = "something";
$scope.someFunction = function(){
//There's nothing here yet
}
//More code follows
})
I have encountered an issue where all unchecked checkboxes become checked when the "Some Function" button is clicked. Upon inspecting the DOM, it became apparent that all checkboxes were being recalculated upon button click.
Is there a method to update the DOM only when the $scope undergoes alterations? Note: One-way binding cannot be used due to potential changes to $scope.settings.active by other functions.