angularjs - How can I monitor the change of a variable in my factory -
i have simple preloading screen script need several controllers. can't update automatically variable , don't know i'm doing wrong.
factory:
myapp.factory("preloader", function(){ var preload = {}; preload.loaded = true; preload.turnon = function () { preload.loaded = true; console.log('on'); } preload.turnoff = function () { preload.loaded = false; console.log('off'); } preload.getstate = function() { return preload.loaded; } return preload; }); controller
mazda.controller('preloadinghome', ['$scope', "preloader", function($scope, preload) { $scope.users = false; $scope.showpreload = preload.getstate(); console.log(preload.loaded); $scope.turnon = function(){ preload.turnon(); } $scope.turnoff = function(){ preload.turnoff(); } // // $scope.state = preload.state; // preload.turnoff(); }]); view
<body data-ng-controller="preloadinghome"> <div>aaa: {{ showpreload }}</div> <div>b: {{users}} </div> <input type="checkbox" ng-model="users" /> <input type="checkbox" ng-change="turnoff()" ng-model="pene" /> <input type="checkbox" ng-change="turnon()" ng-model="pene2" /> <!-- script src="js/scripts.min.js"></script --> <script src="js/scripts.min.js"></script> <script src="js/bundle.js"></script> </body> my problem is: {{ showpreload }} variable load on view stays true no matter how change it.
i think important point out reason not work because getstate() method returns value, not reference.
when controller instantiates, sets showpreloaded variable value of preloaded.loaded object member, true. every time change state after that, updating object member in factory properly, $scope.showpreloaded value equal true, not referencing value in factory.
here how change code:
in view
<div>aaa: {{ showpreload.loaded }}</div> in factory:
preload.getstate = function() { return preload; } the factory returning reference object preload. javascript returns references when returning object, , returns value when returning primitive
Comments
Post a Comment