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>

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

FirstController.js：

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

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

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

Answer 2

来自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中接收。

Answer 3

我认为将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

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

3 个答案: