角UI路由器不能分辨注入参数 [英] Angular UI router not resolving injected parameters

问题描述

因此​​考虑从我angularUI路由设置下面的片段。我导航到该路由/分类/管理/ 4 /细节（例如）。我希望'类'的相关负责加载之前得到解决，而且的确是我可以把一个断点，从类别服务返回类别决心函数内，看到该类别已归还的程度。现在把另一个断点控制器本身，我可以看到类别永远是不确定的里面。它不是由UI路由器注入。

任何人都可以看到这个问题？这可能比我所提供的code之外的某个地方，但因为我没有错误，当我运行code，这是不可能知道问题的根源可能在于。典型的JS静默失败！

  .STATE（'category.manage'，{
            网址：'/管理'，
            templateUrl：'/主/分类/树，
            控制器：'CategoryCtrl
        }）
        .STATE（'category.manage.view'，{
            摘要：真实，
            网址：'/ {的categoryId：[0-9] *}
            解析：{
                类别：['CategoryService'，'$ stateParams'，函数（CategoryService，$ stateParams）{
                    返回CategoryService.getCategory（$ stateParams.categoryId）。然后（returnData）; //此行的控制器被实例化之前运行
                }]
            }，
            观点：{
                类别的内容：{
                    templateUrl：'/主/分类/丝带，
                    控制器：['$范围'，'分类'，函数（$范围，类别）{
                        $ scope.category =类别; //类总是不确定的，即UI路由器没有它注入
                    }]
                }
            }，
        }）
            .STATE（'category.manage.view.details'，{
                网址：'/详细信息，
                数据：{模式：观看}，
                templateUrl：'/主/分类/详细信息，
                控制器：'CategoryDe​​tailsCtrl的细节
            }）
 

解决方案

这个概念正在工作。我创建这里工作plunker。这些变化是在这里

而不是这种

 解析：{
    类别：['CategoryService'，'$ stateParams'，函数（CategoryService，$ stateParams）{
        //此行的控制器被实例化之前运行
        返回CategoryService.getCategory（$ stateParams.categoryId）。然后（returnData）;
    }]
}，
 

我刚刚返回的getCategory ...

的结果

 解析：{
    类别：['CategoryService'，'$ stateParams'，函数（CategoryService，$ stateParams）{
      返回CategoryService.getCategory（$ stateParams.categoryId）; //没有，那么
    }]
}，
 

与天真服务实现：

  .factory（'CategoryService'，函数（）{返回{
  的getCategory：功能（ID）{
    回到{分类：'父类的，的categoryId：ID};
  }
}}）;
 

即使这会是一个承诺......将解决等待，直到它被处理......

  .factory（'CategoryService'，函数（$超时）{{回报
  的getCategory：功能（ID）{
    返回$超时（函数（）{
        回到{分类：'父类的，的categoryId：ID};
    }，500）;
  }
}}）;
 

So consider the following fragment from my angularUI routing setup. I am navigating to the route /category/manage/4/details (for example). I expect 'category' to be resolved before the relevant controller loads, and indeed it is to the extent that I can put a breakpoint inside the resolve function that returns the category from the category service and see that the category has been returned. Now putting another breakpoint inside the controller itself I can see that 'category' is always undefined. It is not injected by UI router.

Can anyone see the problem? It may be somewhere other than in the code I've provided but as I have no errors when I run the code, it's impossible to tell where the source of the issue might lie. Typical js silent failures!

        .state('category.manage', {
            url: '/manage',
            templateUrl: '/main/category/tree',
            controller: 'CategoryCtrl'
        })
        .state('category.manage.view', {
            abstract: true,
            url: '/{categoryId:[0-9]*}',
            resolve: {
                category: ['CategoryService', '$stateParams', function (CategoryService, $stateParams) {
                    return CategoryService.getCategory($stateParams.categoryId).then(returnData); //this line runs before the controller is instantiated
                }]
            },
            views: {
                'category-content': {
                    templateUrl: '/main/category/ribbon',
                    controller: ['$scope', 'category', function ($scope, category) {
                        $scope.category = category; //category is always undefined, i.e., UI router is not injecting it
                    }]
                }
            },
        })
            .state('category.manage.view.details', {
                url: '/details',
                data: { mode: 'view' },
                templateUrl: '/main/category/details',
                controller: 'CategoryDetailsCtrl as details'
            })

解决方案

The concept is working. I created working plunker here. The changes is here

instead of this

resolve: {
    category: ['CategoryService', '$stateParams', function (CategoryService, $stateParams) {
        //this line runs before the controller is instantiated
        return CategoryService.getCategory($stateParams.categoryId).then(returnData); 
    }]
},

I just returned the result of the getCategory...

resolve: {
    category: ['CategoryService', '$stateParams', function (CategoryService, $stateParams) {
      return CategoryService.getCategory($stateParams.categoryId); // not then
    }]
},

with naive service implementation:

.factory('CategoryService', function() {return {
  getCategory : function(id){
    return { category : 'SuperClass', categoryId: id };
  }
}});

even if that would be a promise... resolve will wait until it is processed...

.factory('CategoryService', function($timeout) {return {
  getCategory : function(id){
    return $timeout(function() {
        return { category : 'SuperClass', categoryId: id };
    }, 500);
  }
}});

这篇关于角UI路由器不能分辨注入参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！