Question

我在SO看到了很多类似的问题，但这些解决方案对我不起作用:(

关于我的网站和应用：后端是带有json api的wordpress，angular app位于mysite.lc/catalog/页面。

我的控制员：

var catalogControllers = angular.module('catalogControllers', []);

    catalogControllers.controller('catalogCtrl', ['$scope', '$state', '$stateParams',
    function ($scope, $state, $stateParams) {   
        $log.debug(angular.toJson($stateParams, true));

        $http.get(url).success(function(data) {
            console.log('data is loaded');
        });      
    }
]);

我的路由设置：

var catalogApp = angular.module('catalogApp', ['ui.router', 'ngResource', 'ngSanitize', 'catalogControllers']);

catalogApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('home', {
            url: '?producttype&colors&models',
            controller: 'catalogCtrl',
            onEnter: function() {
                console.log('route entered');
            }
        });
    $urlRouterProvider.otherwise("/");
}]);

所以当我像http://mysite.lc/catalog/#/?producttype=4&colors=5,7,9&models=17控制台节目一样去网址时来自catalogCtrl的{}，然后来自catalogCtrl $ http.get的data is loaded，仅在此之后 route entered

如果我以那种方式记录（在路由器配置中）controller: function($stateParams) { console.log($stateParams); }它不会输出任何内容。

Answer 1

我建议在.config部分解析相应状态的$ stateParams。此外，如果是您的意图，您需要将您的网址名称作为网址属性的一部分，而不仅仅是状态参数，因为ui-router不会因为您声明它是家庭状态而自动分配“主页”。您还可以通过声明'params'属性并将所有内容设置为null来使参数可选。

var catalogApp = angular.module('catalogApp', ['ui.router','ngResource', 'ngSanitize', 'catalogControllers']);

catalogApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider

    .state('home', {
        params: {
            productType: null,
            colors: null,
            models: null
        }
        url: '/home?productType&colors&models',
        controller: 'catalogCtrl',
        resolve: {
            parameters: function($stateParams){
                return $stateParams;
            }
        }
    });

    $urlRouterProvider.otherwise("/");
}]);

并在控制台中查看它，我建议使用$ log来保存它的序列（我在使用console.log之前有这个问题）和angular.toJson来显示数据;

var catalogControllers = angular.module('catalogControllers', []);

catalogControllers.controller('catalogCtrl', ['$scope', 'parameters', '$log'
function ($scope, parameters, $log) {   
        $log.debug(angular.toJson(parameters, true));
        //the 'true' arguments makes the json 'prettyfied'
    }
]);

让我知道它是怎么回事，因为我创建一个不从根页面开始的应用程序对我来说有点不正统。

Answer 2

我发现问题是什么，它很小而且容易（通常:)）。

实际上一切正常，但我在上面的代码中有一些未提及的$http.get调用，并且我的日志记录是在加载任何数据之前，所以首先我记录了我的$ stateParams并且仅在此之后（在数据之后）已经实现了我的"home" state。所以解决方案是将$ stateParams的工作放入$http.get(..).success()函数。

所以现在我的控制器看起来像

var catalogControllers = angular.module('catalogControllers', []);

catalogControllers.controller('catalogCtrl', ['$scope', '$state', '$stateParams',
    function ($scope, $state, $stateParams) { 
        $http.get(url).success(function(data) {
            console.log('data is loaded');
            $log.debug(angular.toJson($stateParams, true));
        });      
    }
]);

路由器：

var catalogApp = angular.module('catalogApp', ['ui.router', 'ngResource', 'ngSanitize', 'catalogControllers']);

catalogApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('home', {
            url: '?producttype&colors&models',
            controller: 'catalogCtrl',
            onEnter: function() {
                console.log('route entered');
            }
        });
    $urlRouterProvider.otherwise("/");
}]);

http://mysite.lc/catalog/#/?producttype=4&colors=5,7,9&models=17之类的网址现在在控制台输出：

来自控制器

中$ http.get的

data is loaded 来自路由器的

route entered

来自控制器中的$ stateParams的

{ "producttype": "4", "colors": "5,7,9", "models": "17" }

请添加您的评论，因为我真的是有角度的新手，并会对此表示赞赏。

$ stateParams是空对象

2 个答案: