AngularJS - 對模型

Question

jQueryUI的滑塊值反映我有以下指令：

directive('yearSlider', function(Filter) { 
    return { 
     restrict: 'E',   // must be an element 
     transclude: false,  // don't preserve content 
     controller: function($scope) { 
      $scope.$watch('yearMin + yearMax', function(newVal, oldVal) { 
       if(newVal === oldVal) return; // skip initialization 

       $("#year-slider").slider("option", "min", parseInt($scope.yearMin)); 
       $("#year-slider").slider("option", "max", parseInt($scope.yearMax)); 
       $("#year-slider").slider("value", $("#year-slider").slider("value")); 
      }); 
     }, 
     link: function postLink($scope, $element) { 
      $element.slider({ 
       range: true, 
       min: 1900, 
       max: new Date().getFullYear(), 
       values: [ 1900, new Date().getFullYear() ], 
       slide: function(event, ui) { 
        $scope.yearFrom = ui.values[0]; 
        $scope.yearTo = ui.values[1]; 
        $scope.$apply(); 
       }, 
       change: function(event, ui) { 
        $scope.yearFrom = ui.values[0]; 
        $scope.yearTo = ui.values[1]; 
        Filter.apply($scope); 
       } 
      }); 
     }, 
     template: 
      '<div id="year-slider"></div>', 
     replace: true 
    } 
}). 

該指令在視圖中使用，它正確呈現一個滑塊。

我將滑塊的兩個值分配給兩個模型yearFrom和yearTo以獲取由滑塊指定的年份範圍。在某些情況下，我需要更改滑塊的最小值/最大值，這就是我在上面的controller中所做的。

這裏的問題是，我在看兩個值yearMin和yearMax和這兩款機型連續改變導致控制器和$element.sliderchange兩次執行。

我想要實現的是執行一次，但事實是，我有兩個模型使它在邏輯上不可能。

Answer 1

我想通了，而寫的問題，我只是改變了我的模型：

$scope.years = { min: data.yearMin, max: data.yearMax } 

而且改變了我的$手錶：

$scope.$watch('years', function(newVal, oldVal) { 
    if(newVal === oldVal) return; // skip initialization 

    $("#year-slider").slider("option", "min", parseInt($scope.years.min)); 
    $("#year-slider").slider("option", "max", parseInt($scope.years.max)); 
    $("#year-slider").slider("value", $("#year-slider").slider("value")); 
}); 

把JQuery的滑塊一邊，這是一種常見AngularJS面臨的問題，特別是有很多模型向觀察者發射多個事件，而我需要他們射擊一次。我相信以類似的方式將它們分組（如果適用）將解決此問題。