AngularJS - jQueryUI slider 值对模型的反射

Question

我有以下指令:

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
    }
}).

该指令在 View 中使用并正确呈现 slider 。

我将 slider 的两个值分配给两个模型 yearFrom和 yearTo获取 slider 指定的年份范围。在某些情况下，我需要更改 slider 的最小值/最大值，这就是我在 controller 中所做的事情。多于。

这里的问题是我正在关注这两个值 yearMin和 yearMax并且这两个模型连续变化导致 Controller 和 change的 $element.slider执行两次。

我想要实现的是执行一次，但我有两个模型的事实使得它在逻辑上是不可能的。

Answer 1

我在写问题时想通了，我只是将模型更改为:

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

并将我的 $watch 更改为:

$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 slider 放在一边，这是我使用 AngularJS 时面临的一个常见问题，特别是有许多模型向观察者触发多个事件，而我需要它们触发一次。我相信以类似的方式(如果适用)对它们进行分组可以解决这个问题。