无法将ui-router解析对象中的变量解析为控制器

时间:2015-11-25 09:00:44

标签: javascript angularjs angular-ui-router

我在我的应用中使用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>

这是我想要获取已解析数据的控制器。

FirstController.js:

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

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

3 个答案:

答案 0 :(得分:1)

因为承诺在返回之前永远不会得到解决。试试这个。

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);
        })
    };
}])

答案 1 :(得分:1)

来自ui-router文档:

  

//控制器等待上述每一项都是
  //在实例化之前完全解析。例如,   //在promiseObj的承诺为
之前,控制器不会实例化   //已经解决了然后将这些物体注入控制器
  //可供使用。

清除已解析的变量仅在状态配置中定义的控制器中可用。您无法在普通控制器中解析这些变量,并且您正试图在控制器中使用状态配置中的data,因此您将收到该错误。

但是,要在FirstController中获取这些数据,您可以这样做:

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

然后,在你的控制器中读取:

app.controller('FirstController', ['$scope' function($scope){
    $scope.$on("dataReceivedFoo", function(response) {
        $scope.myData = response.data;
    })
}]);

基本上,我们会从您的州配置广播数据,然后在您的FirstController中接收。

答案 2 :(得分:1)

我认为将controller: 'FirstController'行添加到州将解决问题。

app.config(['$stateProvider', function($stateProvider){
    $stateProvide.state('State1', {
       url:'/State1',
       controller: 'FirstController',
       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'
            }
          }
       }
    })
}
]);
  

<强>解析

     

您可以使用resolve为控制器提供内容或数据   这是国家的习惯。 resolve是一个可选的map   应该注入控制器的依赖项。

     

如果这些依赖项中的任何一个是承诺,它们将被解析并且   转换为控制器实例化之前的值和   $ stateChangeSuccess事件被触发。

     

resolve属性是一个地图对象。地图对象包含   键/值对:

     

- {string}:要注入的依赖项的名称   控制器即可。

     

factory - {string | function}:如果是string,那么它是

     
    

服务的别名。否则如果是函数,那么它是注入的     返回值被视为依赖项。如果结果是     承诺,它是在控制器实例化之前解决的     值被注入控制器。

  

https://github.com/angular-ui/ui-router/wiki