執行完所有$ watch後的AngularJS控制器事件

Question

所有控制器匹配器執行後都可能觸發一個事件（僅一次）？

例如：

$scope.$watch 'var1', (value) -> 
    # Do something ... 
    callEvent() 

$scope.$watch 'var2', (value) -> 
    # Do something ... 
    callEvent() 

$scope.$watch 'var3', (value) -> 
    # Do something ... 
    callEvent() 

$scope.$watch 'var4', (value) -> 
    # Do something ... 
    callEvent() 

在我的情況callEvent（）發射4次，但我只需要一個時間。

我也可以改變我的商業應用程序邏輯，但它會在很長的一段時間。

Answer 1

你的watchExpression綁定到那些var*字符串;你需要（例如boolean）添加到相同的，所以它會像你的var*和boolean;成功執行後更改boolean值。

另一種方法是更改​​watchExpression本身，但這有點棘手，並且難以理解;另一個可能是解除您的聽衆（s）。

祝你好運，讓我知道，如果你碰巧有一個更好的/不同的方法。

Answer 2

一種方式是使用一個額外的，深刻的手錶（不知道CS，代碼將在JS）：

$scope.$watch(
    function() { 
     return { 
      var1: $scope.var1, 
      var2: $scope.var2, 
      var3: $scope.var3, 
      var4: $scope.var4 
     }; 
    }, 
    function(newval) { 
     callEvent(); 
    }, 
    true // deep watch 
); 

注意再次，事件將被消化每循環一次被解僱了！

另一種方法是使用一個標誌 - 這將需要一個超時（醜）復位：

var flag = false; 

$scope.$watch('var1', function(newval) { 
    // Do something 
    callEventOnce(); 
}); 

// same for var2, 3, 4 

function callEventOnce() { 
    if(!flag) { 
     flag = true; 
     $timeout(function() { 
      flag = false; 
     }); 
     callEvent(); 
    } 
} 

一種方式來逃避超時的醜陋是使控制器聽該事件，然後重置該標誌。例如，如果callEvent()實現爲：

// HYPOTHETICAL IMPLEMENTATION OF callEvent() 
function callEvent() { 
    $rootScope.$broadcast('my_event'); 
} 

一下添加到控制器：

$scope.$on('my_event', function() { 
    flag = false; 
}); 

Answer 3

如何使用承諾？

watchNames = 'var1 var2 var3 var4'.split(' ') 
watchDefers = {} 

eventHandler = -> 
    # do what you want 

    initDefers() 

initDefers = -> 
    watchNames.forEach (varName) -> 
    watchDefers[varName] = $q.defer() 

    watchPromiseArray = watchNames.map (varName) -> 
    watchDefers[varName].promise 

    $q.all(watchPromiseArray).then eventHandler 

$scope.$watch 'var1', (value) -> 
    watchDefers.var1.resolve() 

$scope.$watch 'var2', (value) -> 
    watchDefers.var2.resolve() 

$scope.$watch 'var3', (value) -> 
    watchDefers.var3.resolve() 

$scope.$watch 'var4', (value) -> 
    watchDefers.var4.reolsve() 

initDefers() 

Answer 4

您可以使用$watchGroup

$scope.$watchGroup(['var1', 'var2', 'var3', 'var4'], function(newVal, oldVal) { 
    // your code here 
}); 

編號：https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope http://www.dotnettricks.com/learn/angularjs/understanding-watch-watchgroup-and-watchcollection-methods-of-scope