Javascript 服务器数据请求后无法更新旋钮的颜色

从服务器请求返回数据后，旋钮的颜色不能像给定的图像链接那样更新。我的代码如下：

JavaScript代码

$scope.options = { /* knob option */   };

$http
   .get(url)
   .then(function(res) {
      $scope.details = res.data.rating  // need to show $scope.details in knob 
   }, function(err) {});

html代码

<ui-knob value="details" options="options "></ui-knob>

NB:我正在使用

//1。您的代码是异步的 //2. 你需要使用1。承诺或承诺2。在路由器或3中解析$在控制器中获取响应后，执行scope.apply（）

//总理1（承诺）：

//控制器中的代码

var vm = this;
vm.asyncGreet = function () {
    var deferred = $q.defer();


    $http({
        method: 'post',
        data: $httpParamSerializerJQLike({
            //***your-send-data***
        }),
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        url: ''//***your-url***
    }).
        success(function (data, status) {
            deferred.resolve('true');
        });
    return deferred.promise;
};

var promise = vm.asyncGreet();
promise.then(function (greeting) {
    //alert('Success: ' + greeting);

    //YOUR CODE AFTER SERVER REQUEST
    $scope.details = res.data.rating;

}, function (reason) {
    //alert('Failed: ' + reason);
}, function (update) {
    //alert('Got notification: ' + update);
});

//Prime 2（在您的路线中解决）

//添加

1. If you use promise do not forget $inject = ['$q']
2. Please, read https://docs.angularjs.org/api/ng/directive/ngCloak
 (
 how use:
 <div ng-controller="yourController" ng-cloak></div>
 )

1。如果使用promise，请不要忘记$inject=['$q']
2.请读https://docs.angularjs.org/api/ng/directive/ngCloak
(
如何使用：
)

我使用以下代码解决此问题：

angular.module('', [])
 .controller('DemoCtrl', function($scope, $timeout) {
     $scope.options = { /* knob option */   };
     $scope.details = 0;  // value initialize
     $http
        .get(url)
        .then(function(res) {
            $timeout(function() {
               $scope.details = res.data.rating  // load data from server   
            }, 1000);                             
         }, function(err) {});
 });

---

你在用旋钮控制其他东西吗？我觉得这个旋钮很有趣，因为它角度兼容，据说支持触摸/更改事件。但是它不会发出任何消息，所以我想知道它是如何完成的。$timeout do start$scope。$digest，您可以连接您的上下文，查看：。然后（$scope.yourCallback.bind（this））和成功

angular.module('', [])
 .controller('DemoCtrl', function($scope, $timeout) {
     $scope.options = { /* knob option */   };
     $scope.details = 0;  // value initialize
     $http
        .get(url)
        .then(function(res) {
            $timeout(function() {
               $scope.details = res.data.rating  // load data from server   
            }, 1000);                             
         }, function(err) {});
 });