javascript - 无法将变量从 ui-router 解析对象解析到 Controller 中

Question

我正在使用ui-router在我的应用程序中。

app.config(['$stateProvider', function($stateProvider){
    $stateProvide.state('State1', {
       url:'/State1',
       resolve: {
          data: function(Service){
              return Service.init();
          }
       },
       views: {
            "header": {
                  templateUrl: 'views/header.tpl.html'
            },
            "center":{
                  templateUrl: 'views/center.tpl.html'
            },
            "footer": {
                  templateUrl: 'views/footer.tpl.html'
            }
          }
       }
    })
}
]);

我尝试从服务器加载 json 文件并在路由器中解析它。 在 resolve对象，我调用负责返回 promise 的服务。

Service.js:

app.service("Service", ['$rootscope', '$http', function($rootscope, $http){
var promise;
this.init = function(){
    promise = this.loadData();
    return promise;
};

this.loadData = function(){
    var url = "users/getData/json.json";
    return $http.get(url).then(function(response){
         return response.data;
    }, function(error){
        alert(error);
        })
    };
}])

center.tpl.html:

<aside id="first-item" ng-controller="FirstController as firstController">
     <first-directive>
</aside>
<aside id="second-item" ng-controller="SecondController as secondController">
     <second-directive>
</aside>

这是我想要获取解析数据的 Controller 。

FirstController.js:

app.controller('FirstController', ['$scope', 'data', function($scope, data){
     this.myData = data;
}]);

我收到下一个错误:Unknown provider: dataProvider < - data 。为什么？

Answer 1

因为 promise 在返回之前从未得到解决。试试这个。

app.service("Service", ['$rootscope', '$http', function($rootscope, $http){
var promise;
this.init = function(){
   return this.loadData();
};

this.loadData = function(){
    var url = "users/getData/json.json";
    return $http.get(url).then(function(response){
         return response.data;
    }, function(error){
        alert(error);
        })
    };
}])