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

我已经创建了一个jQuery UI Slider Angular指令。这里是我的代码：当我更改范围值时，为什么我的jQuery 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.

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

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

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

第一控制台日志打印出范围对象，它具有正确的值（即，最小= 0，最大值= 100，范围= [0 ，100]）。

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

请有人能帮我理解为什么会发生这种情况。

感谢，

本布洛克

来源

2016-11-11 Ben Bullock

地方。然后，而不是.success。 – stormec56

创建一个提琴手/ plunkr链接将帮助这里的人快速解决它。 –

我已经创建了一个演示该问题的plunkr。请参阅： https://plnkr.co/edit/E8sSh3Nh5F6SHLFszuWl?p=preview –

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

看到这个：

但是当你想到这会不会让你的滑块工作。滑块已创建，因此要修改其参数，必须使用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

来源

2016-11-14 12:27:03 112g

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

回答

相关问题