Geek Answers Handbook

Toggle or disable / re-enable AngularJS watches

I need to be able to ignore certain hours when performing certain tasks. Here is the script.

I have a couple of field observers that are used to compute the totals field.

All these fields can be changed manually, which will trigger the clock, which calculates the field "total values".

Fields can also be loaded from a saved state, which also starts a clock that calculates a “totals” field.

The totals field can also be manually redefined, saved, and loaded.

The problem occurs when a manually overridden "totalals" field is loaded with other fields. Hours that recalculate totals start and overwrite manually overridden totals.

I need to be able to ignore the clock at boot time. Is there any way to do this?

I know that an observer can be disabled using the unregister function, which is transmitted back when the chat is created, but when the observer is recreated, it is still known that the data that he was viewing has changed.

Note. This is a simplified description of the business logic associated with the problem. Failure to turn off the clock will require a significant amount of work.

Here is the fiddle showing the problem: jsfiddle.net/vGWZy/1/

+4
3

. disabler

http://jsfiddle.net/snicksnk/66osj8zm/

//Service for working with watcher binding
var watchService = {
    watchers: {},
    create: function(name, callback){

        watchService.watchers[name] = 
        {
            'callback': callback,
            'disableCallback': null
        };
    },
    enable: function($scope, name){
        if (typeof watchService.watchers[name]['callback'] !== 'function'){
            return;
        }
        watchService.disable(name);
        var watcher = watchService.watchers[name]['callback'];
        watchService.watchers[name]['disableCallback'] = $scope.$watch(name, watcher, true);


    },
    disable: function(name){
        if (typeof watchService.watchers[name]['disableCallback'] !== 'function'){
            return;
        }
        watchService.watchers[name]['disableCallback']();
    }
};

//Creating of watcher callbacks, instead of using $scope.$watch directly
watchService.create('item.value1',  function() {
    $scope.item.total = $scope.item.value1 * $scope.item.value2;
});


watchService.create('item.value2',  function() {
    $scope.item.total = $scope.item.value1 * $scope.item.value2;
});



//Wathcers enabler
$scope.enableWatchers = function(){
    watchService.enable($scope, 'item.value1');
    watchService.enable($scope, 'item.value2');
};

//Wathcers disable
$scope.disableWatchers = function(){
    watchService.disable('item.value1');
    watchService.disable('item.value2');
};
+4

$watch(), , Angular JS "de-registration". $watch() - , , , $watch() .

var leaveWatcher = function() {
  $scope.$watch('selectedStatus', function(newValue, oldValue) {
    if (newValue[0] === "*") {
      .......
      leaveWatcher(); //Disable
    }
  });
};

leaveWatcher(); //Enable
Hide result

http://www.bennadel.com/blog/2480-unbinding-watch-listeners-in-angularjs.htm

+3

ng-change .

, ng-change .

<html ng-app>

  <head>
    <script data-require="angular.js@1.2.9" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="ExampleCtrl">
     <h1>Hello Plunker!</h1>

    <label>Value 1:</label><input type="number" ng-model="value1" ng-change="updateTotal()"><br />
    <label>Value 2:</label><input type="number" ng-model="value2" ng-change="updateTotal()"><br />
    <label>Value 3:</label><input type="number" ng-model="value3" ng-change="updateTotal()"><br />

    <label>Total:</label><input type="number" ng-model="total" placeholder="Total"><br />
  </body>

</html>


function ExampleCtrl($scope){
    $scope.value1 = 0;
    $scope.value2 = 0;
    $scope.value3 = 0;
    $scope.total = 0

    $scope.updateTotal = function(){
       $scope.total = $scope.value1 + $scope.value2 + $scope.value3;
   };
}

, , , .

+1
source

More articles:


All Articles