Question

我通过一个看起来像这样的工厂从我的api调用我的数据：

app.factory('Service', ['$http', function ($http) {

var urlBase = 'http://localhost:50476/api';
var Service = {};

Service.getComp = function () {
    return $http.get(urlBase + '/complaints')

};

return Service;
}]);

然后我使用我的控制器来使用指令：

getComp();
$scope.comp = [];

function getComp() {
    var deferred = $q.defer();

    Service.getComp()
    .success(function (comp) {
        console.log('comp', comp); //returns array data
        $scope.comp = comp.data;
        deferred.resolve(comp);
    })
    .error(function (error) {
        $scope.error = 'error' + error.message;
    });

    return deferred.promise;
}

$scope.index = 0;
$scope.complaints = $scope.comp[0];
console.log($scope.complaints); //undefined
console.log($scope.comp); //array of 0

当我尝试访问函数外部的项时，它是未定义的。我试图寻找像使用$ q的分辨率，但它仍然没有显示数据。当我添加延迟部分时，我的ng-repeat也停止工作。

Answer 1

试试这个：

getComp();
$scope.comp = [];

function getComp() {
    return Service.getComp()
    .success(function (comp) {
        $scope.comp = comp.data;
        $scope.complaints = $scope.comp[0];
    })
    .error(function (error) {
        $scope.error = 'error' + error.message;
    });
}

执行日志时，这些值是未定义的，因为这些行在您的请求从服务器返回之前运行。这就是设置$scope.complaints必须进入success回调的原因。

Answer 2

如果你想在启动逻辑之前确保在某些状态下加载complaints，你可以使用ui-routers resolve keyword（我想你正在使用带有离子标准包的ui-router）

在你的main.js

$stateProvider.state('yourState', {
  resolve: {
    complaints: function(Service) {
      return Service.getComp();
    }
  }
});

然后在控制器中

注入complaints

.controller('myController', function(complaints) {
   $scope.complaints = complaints;
})

$ stateProvider的

resolve将阻止并等待承诺解决...

使用$ q延迟

2 个答案: