Question

每次成功请求完成后，我想在我的加载程序栏中添加20 px。来自各种apis的交错数据集。每次成功请求时都会收到$，我想将{20}添加到var progress ，即使数字正在递增$scope.progressWidth也不会更新视图。它在width: 0px处保持静止。当我尝试$ scope.apply（）时，它说消化已经发生了。

HTML视图：

<div class="loader" ng-style="progressWidth"></div>

JS：

var progress = 0;

$scope.progressWidth = {
    'width': progress + 'px'
};

angular.forEach(['load::1', 'load::2', 'load::3', 'load::video'], function (value) {
    $scope.$on(value, function (event) {
        load = true;
        loaded.push(true);

        if (load === true ) {
            load = false;
            progress += 20;
        }

        if (loaded[0] === true && loaded[1] === true && loaded[2] == true && loaded[3]) {
            $scope.$broadcast('load::menu');
        }
    });
});

数据：

$http.jsonp('http://filltext.com/?rows=10&delay=1&fname={firstName}&callback=JSON_CALLBACK').
        success(function(data){
            $scope.datas[0] = data;
            console.log($scope.datas);
            $scope.$emit('load::1');
    });

    $http.jsonp('http://filltext.com/?rows=10&delay=2&fname={firstName}&callback=JSON_CALLBACK').
        success(function(data){
            $scope.datas[1] = data;
            console.log($scope.datas);
            $scope.$emit('load::2');
    });

    $http.jsonp('http://filltext.com/?rows=10&delay=4&fname={firstName}&callback=JSON_CALLBACK').
        success(function(data){
            $scope.datas[2] = data;
            console.log($scope.datas);
            $scope.$emit('load::3');
    });

Answer 1

尝试在进度变量上添加监视并从中更新progressWidth：

$scope.$watch('progress', function(value) {
    $scope.progressWidth = { 'width': value+ 'px' };
});

此外，请确保进度也在范围内，并始终更新它，并调用$ scope.progress。

ng-style的变量未更新到视图

1 个答案: