我有以下指令：
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,以获得滑块指定的年份范围.在某些情况下,我需要更改滑块的最小值/最大值,这就是我在上面的控制器中所做的.
这里的问题是我正在观察yearMin和yearMax这两个值,这两个模型连续变化,导致控制器和$element.slider执行两次更改.
我想要实现的只是执行一次,但事实上我有两个模型,这在逻辑上是不可能的.
解决方法
我在写这个问题时想通了,我只是将我的模型改为：
$scope.years = { min: data.yearMin,max: data.yearMax }
并将我的$watch改为：
$scope.$watch('years',oldVal) {
if(newVal === oldVal) return; // skip initialization
$("#year-slider").slider("option",parseInt($scope.years.min));
$("#year-slider").slider("option",parseInt($scope.years.max));
$("#year-slider").slider("value",$("#year-slider").slider("value"));
});
把JQuery滑块放在一边,这是AngularJS面临的一个常见问题,特别是当我需要它们触发一次时,许多模型会向观察者发送多个事件.我认为以类似的方式对它们进行分组(如果适用)可以解决这个问题.
