Question

我创建了一个jQuery UI Slider Angular Directive。这是我的代码：

HTML

<slider min="filters.price.min" max="filters.price.max" range="filters.price.range"></slider>

控制器

App.controller("MainController", function ($scope, $http) {
$scope.initFilters = function () {
    $scope.filters = {};
    $scope.filters.price = {};
    $scope.filters.price.min = 0;
    $scope.filters.price.max = 0;
    $scope.filters.price.range = [0, 0];
};
$scope.initFilters();

$http.get("someurl").success(function (data) {
    $scope.initFilters();
    $scope.filters.price = {};
    $scope.filters.price.min = 0;
    $scope.filters.price.max = 100;
    $scope.filters.price.range = [$scope.filters.price.min, $scope.filters.price.max];
    $scope.$broadcast("applyFilters");
});
});

指令

    App.directive('slider', function () {
return {
    restrict: 'E',
    replace: true,
    transclude: true,
    template: "<div class='slider'></div>",
    scope: {
        min: "=",
        max: "=",
        range: "="
    },
    link: function (scope, element, attrs) {
        $(element).slider({
            range: (scope.range != undefined),
            min: scope.min,
            max: scope.max,
            values: [scope.min, scope.max],
            slide: function (event, ui) {
                scope.$apply(function () {
                    scope.range = ui.values;
                });
            }
        });
        scope.$on("applyFilters", function () {
            console.log("APPLY FILTERS:", scope);
            console.log("APPLY FILTERS:", scope.min, scope.max, scope.range);
        });
    }
}
});

从我的代码中可以看出，我的价格滑块初始化为0。

然后我对Web服务进行HTTP调用，并在收到响应后，尝试将价格滑块的最小值，最大值和范围值设置为0-100。

出于某种原因，我的滑块在UI中保持为0。

事件处理程序中的控制台日志最奇怪但是......

第一个控制台日志打印出范围对象，该对象具有正确的值（即min = 0，max = 100和range = [0,100]）。

第二个控制台日志打印出错误的值（即min = 0，max = 0和range = [0,0]）。

请有人帮我理解为什么会这样。

谢谢，

本布洛克

Answer 1

我认为你的applyFilters事件处理程序是在更新指令范围之前执行的。您可以在触发事件之前使用延迟或强制角度发射事件来更新范围。

看到这个： plnkr

然而，这不会使您的滑块按预期工作。滑块已经创建，因此要修改其参数，您必须使用option方法，请参阅 docs

我会在min，max和range添加观看内容，如下所示：

scope.$watch("min", function(value) {
  slider.slider( "option", "min", value );
});      

scope.$watch("max", function(value) {
  slider.slider( "option", "max", value );
});      

scope.$watch("range", function(value) {
  slider.slider( "option", "range", value );
});

查看完整代码here

当我更改范围值时，为什么我的jQuery Slider Angular Directive不会更新

1 个答案: