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

Posted 2023-05-08

【中文标题】当我更改范围值时，为啥我的 jQuery Slider Angular Directive 不会更新

【英文标题】：Why will my jQuery Slider Angular Directive not update when I change the scope value当我更改范围值时，为什么我的 jQuery Slider Angular Directive 不会更新

【发布时间】：2017-03-25 16:21:11

【问题描述】：

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

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]）。

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

谢谢，

本·布洛克

【问题讨论】：

放置 .then 而不是 .success。

创建一个 fiddler/plunkr 链接将帮助这里的人们快速解决它。

我创建了一个 plunkr 来演示这个问题。见这里：plnkr.co/edit/E8sSh3Nh5F6SHLFszuWl?p=preview

【参考方案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