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面临的问题，特别是有很多模型向观察者发射多个事件，而我需要他们射击一次。我相信以类似的方式将它们分组（如果适用）将解决此问题。