javascript - JSON 获取后 AngularJS 等待 View

Question

首先抱歉英语不好。我有一个关于 AngularJS 的问题。通过这个http post请求，我从mysql json格式获得相同的数据。

app.controller('DeviceActivityCtrl', function ($scope, $rootScope, $location, $http, Data,$stateParams,DeviceActivityResult) {

    //$scope.foodDistribution=null;

    if (DeviceActivityResult.status == "success") {
        $scope.deviceActivityLog = DeviceActivityResult;
        $scope.authError = 'Correct';
        alert(DeviceActivityResult.data[0].steps);
    }
    else {
        $scope.authError = 'notsuccess';
    }


});

问题就出在这里。当 View (html)加载时，如果http请求没有完成。无法加载 html。因为百分比:数据(尚未准备好)。我如何等待 json 的加载 View (html)完成其工作。感谢您的帮助

<div class="inline">
                <div ui-jq="easyPieChart" ui-options="{
                  percent: ({{deviceActivityLog.data[0].activity_time}}/340)*100,
                  lineWidth: 10,
                  trackColor: '{{app.color.light}}',
                  barColor: '{{app.color.success}}',
                  scaleColor: '{{app.color.light}}',
                  size: 188,
                  lineCap: 'butt'
                }">
                    <div>
                        <span class="h2 m-l-sm step">{{(deviceActivityLog.data[0].activity_time/340)*100|number:0}}</span>%
                        <div class="text text-sm"></div>
                    </div>
                </div>
            </div>

----------------状态--------------

.state('report.food', {
                url: '/{userid:[0-9]{1,4}}',
                templateUrl: 'tpl/report_food.html',
                controller: 'DeviceActivityCtrl',
                resolve: {
                    deps: ['$ocLazyLoad',
                        function ($ocLazyLoad) {
                            return $ocLazyLoad.load('ui.grid').then(
                                function () {
                                    return $ocLazyLoad.load('js/app/report/reportFood.js','UiGridDemoCtrl.resolve');
                                }
                            );
                        },
                    ],
                    DeviceActivityResult: function(Data, $stateParams) {
                        return Data.post('deviceActivity',
                            {userid: $stateParams.userid}
                        );
                    }
                }
            })

Answer 1

看起来您正在使用 ui-router，因此您可以在转换到状态数据之前“解析”状态数据。以下是您可以如何执行此操作的示例:

.state('yourState', {
    ...
    controller: 'DeviceActivityCtrl',
    resolve: {
        DeviceActivityResult: function(Data, $stateParams) {
            return Data.post('deviceActivity',
                {userid:$stateParams.userid}
            );
        }
    }
})


.controller('DeviceActivityCtrl', function ($scope, $rootScope, $location, $http, DeviceActivityResult) {
    //   Data.toast(DeviceActivityResult);
    if (DeviceActivityResult.status == "success") {
        $scope.deviceActivityLog = DeviceActivityResult;
        $scope.authError = 'Correct';
    }
    else {
        $scope.authError = 'notsuccess';
    }
});