Here's a code snippet to consider:
var app = angular.module('test', []);
app.controller("controller", function() {
this.hello = "Hello world";
this.condition1 = true;
this.condition2 = true;
this.check_condition2 = function() {
return this.condition2;
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="controller as ctrl">
{{ctrl.hello}}
<br>
<label>
<input type="checkbox" ng-model="ctrl.condition2">Condition2</label>
<br>
<button ng-disabled="ctrl.condition1 && ctrl.check_condition2()">My BTN</button>
</div>Let's assume Angular operates in the following way:
Angular monitors the controller's properties such as condition1.
It interprets the ng- directives and links them correctly to the properties. Therefore, if a directive like ng-disabled relies on condition1, it is reevaluated every time condition1 changes.
Now, revisit the provided example. It utilizes 2 conditions, with the second being a function instead of an attribute. How does Angular detect when the value returned by that function changes?
One theory is that Angular reevaluates all its directives whenever any part of the model changes, whether it's related to the directives or not. However, this approach may impact performance.
Does anyone have insights on how Angular monitors the ng-disabled expression in this context and whether using a function is appropriate?