Question

我使用滑块组件来表示我保存的日期范围，我在服务从后端返回HTTP响应之前遇到了滑块运行的问题，因此我遇到了滑块内部代码中出现错误的问题库，我传递的值似乎没有绑定到指令，当我初始化传递的数组值以获得一个空对象时，我没有面对错误但是值永远不会更新到服务响应，你能不能帮助我了解正在发生的事情？

请注意，获取服务响应并在变量初始化中进行设置效果很好。

还为该值添加了console.log。

HTML：

  <multi-slider name="dateSlider"
        floor="{{model.dateFloor}}"
        step="60"
        precision="2"
        ceiling="{{model.dateCeiling}}"
        bubbles="true"
        display-filter="date : 'shortTime'"
        reletiveValues="true"
        ng-model="model.dateSliders"
        style="margin-top:200px">
    </multi-slider>
<multi-slider-key ng-model="model.dateSliders" display-filter="date : 'shortTime'"></multi-slider-key>

并在我的控制器中：

$scope.model ={};
$scope.model.testing = [{}];
$scope.model.dateSliders = $scope.model.testing;

var floor = new Date();
floor.setHours(0,0,0,0);
$scope.model.dateFloor = floor.valueOf();

var ceiling = new Date();
ceiling.setHours(24,0,0,0);
$scope.model.dateCeiling = ceiling.valueOf();


userService.getSettings($scope.id, function(err, response) {
    if(err) {
        $rootScope.showNotificationMessage('danger', err, 10000, true);
    } else {
        $scope.date = $scope.response.date_ranges;
        i = 0;
        $scope.testing = [];
        angular.forEach($scope.date,function(slider, index){
            var newVal = {}; 
            v = angular.copy(slider[0]);

            if (index % 2) {
                newVal.title = "End:";
                newVal.component = 'component' + index;
                newVal.value = formatTimeWithCurrentDate(v.end);
            } else {
                newVal.title = "Start :";
                newVal.component = 'component' + index;
                newVal.value = formatTimeWithCurrentDate(v.start);
            }

            $scope.testing.push(newVal);
        });

        $scope.model.dateSliders = $scope.model.testing;
        console.log("GOT RESPONSE");
        .....

Answer 1

原因在于组件本身。我相信你正在使用这个 - https://github.com/enkodellc/angular-multi-slider

在src中有一个片段：

 if (!bindingsSet) {
   setBindings();

   // Timeout needed because bubbles offsetWidth is incorrect during initial rendering of html elements
   setTimeout( function() {
     if ('' + scope.bubbles === 'true') {
       angular.forEach(bubbles, function (bubble) {
          bubble.addClass('active');
       });
     }
     updateCalculations();
     setHandles();

     //Get Default sizes of bubbles and handles, assuming each are equal, calculated from css
     handleTop = handleTop === undefined ? handles[0][0].offsetTop : handleTop;
     handleHeight = handleHeight === undefined ? handles[0][0].offsetHeight : handleHeight;
     bubbleTop = bubbleTop === undefined ? bubbles[0][0].offsetTop : bubbleTop;
     bubbleHeight = bubbleHeight === undefined ? bubbles[0][0].offsetHeight + 7 : bubbleHeight ; //add 7px bottom margin to the bubble offset for handle

     resetBubbles();
   }, 10);
 }

问题是这个构造没有更新元素（在第一次执行setBindings函数之后）。我发现的唯一方法是使用另一个滑块或修改src，如下所示（将大括号移动到正确的位置）：

 if (!bindingsSet) {
   setBindings();
 }

   // Timeout needed because bubbles offsetWidth is incorrect during initial rendering of html elements
   setTimeout( function() {
     if ('' + scope.bubbles === 'true') {
       angular.forEach(bubbles, function (bubble) {
          bubble.addClass('active');
       });
     }
     updateCalculations();
     setHandles();

     //Get Default sizes of bubbles and handles, assuming each are equal, calculated from css
     handleTop = handleTop === undefined ? handles[0][0].offsetTop : handleTop;
     handleHeight = handleHeight === undefined ? handles[0][0].offsetHeight : handleHeight;
     bubbleTop = bubbleTop === undefined ? bubbles[0][0].offsetTop : bubbleTop;
     bubbleHeight = bubbleHeight === undefined ? bubbles[0][0].offsetHeight + 7 : bubbleHeight ; //add 7px bottom margin to the bubble offset for handle

     resetBubbles();
   }, 10);

这里有一个plunker（从官方演示分叉，文件已更改 - multislider.js）： http://plnkr.co/edit/DqcAvqNnSyJnXYRpsFT6?p=preview

使用html组件绑定服务响应时出现问题

1 个答案: