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

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 对象中，我调用负责返回承诺的服务。

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

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

Answer 2

来自ui-router 文档：

// 控制器等待上述每一项
// 在实例化之前完全解决。例如，
// 控制器不会实例化，直到 promiseObj 的 promise 有
// 已解决。然后将这些对象注入控制器
// 并且可以使用。

已清除已解析变量仅在状态配置中定义的控制器中可用。您无法在普通控制器中解析这些变量，并且您尝试在控制器的状态配置中使用 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 是一个可选的映射 应该注入控制器的依赖项。

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

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

key – {string}：要注入到 控制器。

factory - {string|function}：如果是字符串，那么它是一个

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

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