angularjs - Angular Ui 路由器无法访问我的 Controller 内的 $stateParams

Question

我是 Angular.js 的初学者，我使用 Ui-router 框架进行路由。 我可以让它在 url 中没有参数的地方工作。但现在我正在尝试构建产品的详细 View ，我需要将产品 ID 传递到 url 中。

我是通过阅读教程并遵循所有方法来完成的。在本教程中，他们使用解析来获取数据，然后加载 Controller ，但我只需要直接将参数发送到 Controller 中，然后从那里获取数据。我的代码如下所示。当我尝试访问 Controller 内的 $stateParams 时，它是空的。我什至不确定 Controller 是否被调用。 代码如下所示。

(function(){
    "use strict";
    var app = angular.module("productManagement",
                            ["common.services","ui.router"]);
    app.config(["$stateProvider","$urlRouterProvider",function($stateProvider,$urlRouterProvider)
        {
            //default
            $urlRouterProvider.otherwise("/");

            $stateProvider
                //home
                .state("home",{
                    url:"/",
                    templateUrl:"app/welcome.html"
                })
                //products
                .state("productList",{
                    url:"/products",
                    templateUrl:"app/products/productListView.html",
                    controller:"ProductController as vm"
                })
                //Edit product
                .state('ProductEdit',{
                    url:"/products/edit/:productId",
                    templateUrl:"app/products/productEdit.html",
                    controller:"ProductEditController as vm"
                })
                //product details
                .state('ProductDetails',{
                    url:"/products/:productId",
                    templateUrl:"app/products/productDetailView.html",
                    Controller:"ProductDetailController as vm"
                })
        }]
    );
}());

这就是我的 app.js 的样子。我在最后一个状态 ProdcutDetails 上遇到了问题。

这是我的 ProductDetailController。

(function(){
    "use strict";
    angular
        .module("ProductManagement")
        .controller("ProductDetailController",
                    ["ProductResource",$stateParams,ProductDetailsController]);
        function ProductDetailsController(ProductResource,$stateParams)
        {
            var productId = $stateParams.productId;
            var ref = $this;
            ProductResource.get({productId: productId},function(data)
            {
                console.log(data);
            });
        }
}());

注意:我发现很多人都有同样的问题 https://github.com/angular-ui/ui-router/issues/136 ，我无法理解他们发布的解决方案，因为我正处于起步阶段。任何解释都会非常有帮助。

Answer 1

我创建了working plunker here

有状态配置

$urlRouterProvider.otherwise('/home');

// States
$stateProvider
    //home
    .state("home",{
        url:"/",
        templateUrl:"app/welcome.html"
    })
    //products
    .state("productList",{
        url:"/products",
        templateUrl:"app/products/productListView.html",
        controller:"ProductController as vm"
    })
    //Edit product
    .state('ProductEdit',{ 
        url:"/products/edit/:productId",
        templateUrl:"app/products/productEdit.html",
        controller:"ProductEditController as vm"
    })
    //product details
    .state('ProductDetails',{
        url:"/products/:productId",
        templateUrl:"app/products/productDetailView.html",
        controller:"ProductDetailController as vm"
    })

上面使用的功能有定义

.factory('ProductResource', function() {return {} ;})
.controller('ProductController', ['$scope', function($scope){
  $scope.Title = "Hello from list";
}])
.controller('ProductEditController', ['$scope', function($scope){
  $scope.Title = "Hello from edit";
}])
.run(['$rootScope', '$state', '$stateParams',
  function ($rootScope, $state, $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
}])
.controller('ProductDetailController', ProductDetailsController)

function ProductDetailsController ($scope, ProductResource, $stateParams)
{
    $scope.Title = "Hello from detail";
    var productId = $stateParams.productId;
    //var ref = $this;
    console.log(productId);
    //ProductResource.get({productId: productId},function(data)    {    });
    return this;
}
ProductDetailsController.$inject = ['$scope', 'ProductResource', '$stateParams'];

检查一下here

但是你知道真正的问题是什么吗？事实上，只有一行字是麻烦制造者。检查原始状态def:

.state('ProductDetails',{
    ...
    Controller:"ProductDetailController as vm"
})

事实上，唯一重要的变化是

.state('ProductDetails',{
    ...
    controller:"ProductDetailController as vm"
})

即controller 而不是 Controller(开头大写 C)