4

次のディレクティブがあります。

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

このディレクティブはビューで使用され、スライダーを正しくレンダリングします。

スライダーの両方の値を 2 つのモデルに割り当て、スライダーyearFromでyearTo指定された年の範囲を取得します。場合によっては、スライダーの最小/最大値を変更する必要があり、それがcontroller上記で行っていることです。

ここでの問題は、両方の値を監視してyearMinおりyearMax、これら 2 つのモデルが連続して変化し、コントローラーchangeが$element.slider2 回実行されることです。

私が達成しようとしているのは、これを 1 回実行することですが、2 つのモデルがあるという事実は論理的に不可能です。

4

1 に答える 1

6

質問を書いているときにそれを理解したので、モデルを次のように変更しました。

$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 スライダーはさておき、これは AngularJS で私が直面した一般的な問題です。特に、複数のイベントをウォッチャーに送信する必要があるのに、複数のモデルが 1 回起動する必要がありました。それらを同様の方法でグループ化すると（該当する場合）、この問題が解決すると思います。

于 2012-11-09T06:16:55.357 に答える