Question

我在angularJS应用程序中有几个滑块。我尝试实现的是当用户更改选择下拉列表中的选项时，滑块应该使用RestAPI中的新值进行更新。

此示例适用于其中一个滑块，但其余部分均相同。

在控制器上创建滑块

myCtrl.ageSlider = {
            value: 17,
            options: {
                showSelectionBar: true,
                ceil: 38,
                hideLimitLabels: true,
                floor: 17,
                onChange: myCtrl.getResults,
                getPointerColor: function(value) {
                    return '#FFCF00'
                },
                getSelectionBarColor: function(value) {
                    return '#FFCF00'
                }
            }
        };

控制器上的更新功能，在选择

的ng-change时调用

myCtrl.updateSliders = function () {

      //other sliders here that don't need a call on API

      StaffServices.getMedic(myCtrl.selected.id,
      function(response) {
        myCtrl.ageSlider.value = parseInt(response.data.age);
        myCtrl.getResults();
      },
      function(response) {
        console.log('Something went wrong on medic process');
      });

    }

调用服务的getResults()函数

myCtrl.getResults = function() {
        myCtrl.results = myService.myUpdatesCalc(passSomeValues);
}

当我从用户界面手动更改滑块时，onChange会触发getResults功能。花费几个小时就找不到原因了。有什么帮助吗？

编辑：这是服务getMedic以避免任何混淆

service.getMedic = function(id, onSuccess, onError) {
          $http.get(API_Base + 'api/staff/medic?id='+id,
          {
              headers: { 'Authorization': 'Bearer '+$cookies.get('token')}
          }).
          then(function(response) {

              onSuccess(response);

          }, function(response) {

              onError(response);

          });
      }

Answer 1

Angular $http会返回承诺，因此您的值不会更新。您将需要处理promise，然后在回调函数中更新它：

myCtrl.getResults = function() {
  myService.myUpdatesCalc(passSomeValues) //this is your REST API, will return a promise
   .then(function(response) { //this is the callback function to handle the successful ajax
    myCtrl.results = response.data; //update your results here!
  }, function(error) { //this is the callback function to handle the failed ajax
    console.log('error')
  })
}

强制更新AngularJS中的rzModule滑块

1 个答案: