Question

我是AngularJS和NodeJS的小新手，我有一个应用程序，我想从mysql数据库加载一些数据，并通过Node服务器和Angular框架加载该数据，我的问题是，我怎么能加载数据在加载之前在页面中显示？我尝试过但总是从json var。

中得到未定义

这是我的代码：

var app = angular.module('pedidos',[]);
app.service('adminPedidos',function($http){
    this.getAll = function(){
        var data =[];
        var req = {
            method: 'GET',
            url: 'http://localhost:3000/all',
        };
        return $http(req).then(function(response, status, headers, config) {
            return response;
        }).error(function(response, status, headers, config) {
            alert(response+" "+status);
        });
    };
});

并且控制器具有以下句子：

app.controller('Main'['$scope','$http','adminPedidos',function($scope,$http,$adminPedidos){
    this.json = [];
    this.json = $adminPedidos.json;
    console.log(this.json);
}]);

另外在html中我有这个：

<section class="container" ng-controller="Main as controller">
    <section ng-repeat="items in controller.json" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div data-id="{{items.id}}">
            <span class="col-lg-3 col-md-3 col-sm-6 col-xs-12" name="name">{{items.name}}</span>
            <span class="col-lg-3 col-md-3 col-sm-6 col-xs-12" name="link"><a href="{{item.link}}">{{items.link}}</a></span>
            <span class="col-lg-2 col-md-2 col-sm-6 col-xs-12" name="price">{{items.price}}</span>
            <span class="col-lg-1 col-md-1 col-sm-6 col-xs-12" name="quantity">{{items.quantity}}</span>
        </div>
        <div class="col-lg-offset-1 col-md-offset-1 col-lg-1 col-md-2 col-sm-6 col-xs-6"><button id="edit" class="btn btn-warning">Editar</button></div>
        <div class="col-lg-1 col-md-2 col-sm-6 col-xs-6"><button id="delete" class="btn btn-danger">Borrar</button></div>
    </section>
</section>

Answer 1

可悲的是，这不是你可以用角度直接向前完全实现的东西。如果要加载大量数据，则必须隐藏视图并仅在数据加载时显示。但是，如果您只加载一些数据，则可以尝试使用以下代码：

$scope.$on("$ionicView.beforeEnter", function(){
  //Load data here
  //And bind to scope
})

但通常情况下，我总是建议您使用ng-show或ng-hide隐藏视图，并且只在加载了所有数据后才显示视图。

Answer 2

一种好方法是使用Location Provider（$ locationProvider）或State provider（$ stateProvider），您可以在解析promise后加载视图。

否则，如果您没有使用其中任何一个，就像您的情况一样，因为服务正在返回承诺，请在使用“then”结算时更新视图

    app.controller(){
    this.json = [];
    var self = this;
    adminPedidos.then(function(data){
        self.json = data; //a digest cycle would be required (Depends)
//also, probably use ng-show to show the view (as other person have suggested)
    }, function(err){

    });
    console.log(this.json);
}]);

Answer 3

服务

angular.module('pedidos').controller('Main'['$scope', 'adminPedidos', function ($scope, adminPedidos) {
        adminPedidos.getAll().success(function (data) {
           $scope.items = data;
        });
}]);

控制器

<section class="container" ng-controller="Main">
<section ng-repeat="item in items" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div data-id="{{item.id}}">
        <span class="col-lg-3 col-md-3 col-sm-6 col-xs-12" name="name">{{item.name}}</span>
        <span class="col-lg-3 col-md-3 col-sm-6 col-xs-12" name="link"><a href="{{item.link}}">{{item.link}}</a></span>
        <span class="col-lg-2 col-md-2 col-sm-6 col-xs-12" name="price">{{item.price}}</span>
        <span class="col-lg-1 col-md-1 col-sm-6 col-xs-12" name="quantity">{{item.quantity}}</span>
    </div>
    <div class="col-lg-offset-1 col-md-offset-1 col-lg-1 col-md-2 col-sm-6 col-xs-6"><button id="edit" class="btn btn-warning">Editar</button></div>
    <div class="col-lg-1 col-md-2 col-sm-6 col-xs-6"><button id="delete" class="btn btn-danger">Borrar</button></div>
</section>

HTML

{{1}}

在页面加载AngularJS和NodeJS之前加载数据

3 个答案: