角UI路由器无法访问我的控制器内$ stateParams [英] Angular Ui-router can't access $stateParams inside my controller

问题描述

我在Angular.js非常初学者，我使用路由的UI路由器框架。
我可以把它高达那里我有在url没有参数工作。但现在我想建立一个产品的详细视图，我需要的产品ID传递到URL。

I am very beginner in Angular.js, I am using the Ui-router framework for routing. I can make it work upto where I have no parameters in the url. But now I am trying to build a detailed view of a product for which I need to pass the product id into the url.

我做到了通过阅读教程，跟着所有的方法。在本教程中他们用决心来获取数据，然后加载控制器，但我只需要从那里中的参数发送到控制器直接，然后获取数据。我的code看起来像下面。当我试图访问控制器内部的$ stateParams它是空的。我甚至不能确定有关控制器是否被调用或没有。
在code看起来像下面。

I did it by reading the tutorials and followed all the methods. In the tutorial they used resolve to fetch the data and then load the controller but I just need to send in the parameters into the controllers directly and then fetch the data from there. My code looks like below. when I try to access the $stateParams inside the controller it is empty. I am not even sure about whether the controller is called or not. The code looks like below.

(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。

this is how my app.js looks like. I am having trouble on the last state, ProdcutDetails.

这是我的ProductDetailController。

here is my 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 ，我无法理解的解决方案的发布，因为我在最开始的阶段。任何的解释是非常有益的。

NOTE : I found lot of people have the same issue here https://github.com/angular-ui/ui-router/issues/136, I can't understand the solutions posted their because I am in a very beginning stage. Any explanation would be very helpful.

推荐答案

我创建工作plunker这里

有是国家配置

$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"
    })

还有就是上面使用的功能定义

There is a definition of above used features

.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'];

检查一下这里

但是，你知道什么是真正的问题？只有一条线路其实是麻烦制造者。检查原始状态DEF：

But do you know what is the real issue? Just one line in fact, was the trouble maker. Check the original state def:

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

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

And in fact, the only important change was

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

即。 控制器 而不是 控制器 （资本在开始时Ç ）

I.e. controller instead of Controller (capital C at the begining)

这篇关于角UI路由器无法访问我的控制器内$ stateParams的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！