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

Question

我正在使用滑块组件来表示我保存的日期范围，我在服务 returns 来自后端的 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);

这是给你的插件（从官方演示中分叉出来，文件已更改 - multislider.js）： http://plnkr.co/edit/DqcAvqNnSyJnXYRpsFT6?p=preview

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

Issue in binding service response with html component

slider

angularjs

angularjs-directive

angularjs-scope

angular-http