I have a basic Angular application set up with the following code:
index.html
<!DOCTYPE html>
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js'></script>
<script src='app.js'></script>
</head>
<body ng-app="app">
<div ng-controller="MyCtrl">
<div ng-show="ready()">
Some content
</div>
</div>
</body>
</html>
And app.js
var app = angular.module('app', []);
app.controller('MyCtrl', function($scope) {
console.log("MyCtrl called")
$scope.ready = function() {
console.log("ready called");
return true;
}
})
When running this code with the console open, you will notice that "MyCtrl called" is logged once, and "ready called" is logged twice. This behavior has puzzled me as I expect $scope.ready to be called only once.
If you switch to Angular v1.1.5 and use ng-if instead of ng-show, the same issue occurs. However, when using ng-init, $scope.ready is correctly called only once. In my scenario, I require either ng-show or ng-if.
Plunkr: http://plnkr.co/edit/ZSwVNLeFSuhbouXZu9SM?p=preview
Clarification:
To clarify my objective, if at some point $scope.ready returns false (e.g., after an AJAX call), "Some content" should no longer be visible. I aim to achieve dynamic behavior based on the result of $scope.ready.
Any thoughts or suggestions would be greatly appreciated. Thank you for your assistance!
For reference, this and this are not addressing the same issue.