AngularJS $ http.get with resolve

时间:2014-01-23 13:33:31

标签: angularjs

我开始了解AngularJS,我有一个有趣的问题。我开始了解routeProvider,我想我可以编写我的应用程序,就像你搜索一个表名一样,它会改变路由,所以你也可以在url之后写表。

来自app.js的详细信息

app.config(function($routeProvider){
    $routeProvider
        .when('/', {
            templateUrl: 'pages/index.html',
            controller: 'homeCtrl'
        })

        .when('/tables/:table', {
            templateUrl: 'pages/about.html',
            controller: 'aboutCtrl',
            resolve: {
                tables: function($http, $routeParams){
                    return $http.get('http://mywebsite.com/doc/ajax/table.php?function=get_table_data&table='+$routeParams.table)
                                .then(function(response){
                                    console.log($routeParams.table);
                                    return response.data;
                                })
                }
            }
        })

        .otherwise({
            templateUrl: 'pages/404.html'
        })
});

控制器

angular
    .module('testApp')
    .controller('aboutCtrl',function($scope, tables){

        $scope.title = "This is the about page!";

        // declare helper variables to not use
        // $scope inside a loop
        var rawFields = [];
        var titleNames = [];

        // load the thead titles (keys)
        angular.forEach(tables[1], function(value, key){
            titleNames.push(key);
        });

        // load table datas without the first object that
        // contains other informations
        for (var i=1; i<tables.length;i++) {
            rawFields.push(tables[i]);
        };

        // set $scope variables to use them in the HTML
        $scope.fields = rawFields;
        $scope.tableName = tables[0].TableName;
        $scope.titles = titleNames;
    });

基本上这就是你所需要的,但如果你愿意,我可以加入更多的代码。

当我在 $ http.get ...function=get_table_data&table=teszt...function=get_table_data&table=teszt2(现在这两个可用)中使用时,一切都运行良好,我得到数据,我可以做与他们有关的任何东西

但是如果我尝试上面$http.get('http://mywebsite.com/doc/ajax/table.php?function=get_table_data&table='+$routeParams.table)中包含的版本,那就太奇怪了。如果我输入...#/tables/teszt我没有得到数据,但是如果我在...#/tables/teszt2之后写,我会得到teszt表的数据,如果我之后写了别的而不是{{1}然后我得到teszt2表的数据。

我如何使用网址拨打电话?

如果您以不同的方式进行此操作,我将不胜感激。

2 个答案:

答案 0 :(得分:12)

来自$routeParams docs

  

请注意, $ routeParams仅在路线更改成功完成后更新。这意味着您不能依赖路由解析函数中的$ routeParams正确。相反,您可以使用$ route.current.params来访问新路由的参数。

所以只需注入$route而不是$routeParams

resolve: {
    tables: function($http, $route){
      return $http.get('http://mywebsite.com/doc/ajax/table.php?function=get_table_data&table='+$route.current.params.table)
      .then(function(response){
        return response.data;
      })
    }
}

答案 1 :(得分:0)

试试这个:

tables: function($http, $routeParams, $rootScope){
                var promise = $http.get('http://mywebsite.com/doc/ajax/table.php?function=get_table_data&table='+$routeParams.table)
                            .then(function(response){
                                console.log($routeParams.table);
                                return response.data;
                            });
                if($rootScope.$$phase != '$apply' && $rootScope.$$phase != '$digest') {
                                    $rootScope.$apply();
                }
                return promise;
            }