ui 路由器解析抛出错误提供者未找到 [英] ui router resolve is throwing error provider not found

问题描述

我这里有一个 ui -router 状态

I have got a ui -router state here

 var AccountParentState = {
            url: "/Account",
            views: accountrootview,
            stickA: true,
        },
            AccountAddState = {
                url: "/add",
                views: addaccountview,
                controller: "account-controller",
                resolve: {
                    Name: function () {
                        return "Joydeep";
                    }
                }
            };

        $stateProvider
            .state('account', AccountParentState)
            .state("account.add", AccountAddState)

这是我的控制器:

angular.module('ngApp').controller('account-controller', ['$scope', '$state', "account", "plugin-factory", "Name", function ($scope
    , $state
    , account
    , plugins, Name) {

    console.log(Name);


}]);

当我尝试解析 account-controller 中的 Name 时.它抛出的错误为:

When I am trying to resolve the Name within the account-controller . Its throwing the error as :

Unknown provider: NameProvider <- Name <- account-controller

我的问题是如何解决这种情况.或者使用 resolve 属性解析 ui-router 状态中的数据.

My question is how to resolve this situation . Or resolve the data within the ui-router state using resolve property .

推荐答案

为了帮助您查看问题，我 创建了工作 plunker，它确实使用了与上述状态类似的定义:

To help you to see the issue, I created working plunker, which does use similar definition to the above states:

  var AccountParentState = {
    url: "/Account",
    views: { '' : 
       { template: 'Account state <hr/><div ui-view=""></div>',} },
    stickA: true, 
  },
    AccountAddState = {
      url: "/add",
      //views: addaccountview,
      templateUrl: 'tpl.html',
      controller: "account-controller",
      resolve: {
        Name: function() {
          return "Joydeep";
        }
      }
    };

  $stateProvider
    .state('account', AccountParentState)
    .state("account.add", AccountAddState)

工厂和控制器:

  .factory('account', function(){return {}})
  .factory('plugin-factory', function(){return {}})
  .controller('account-controller', 
     ['$scope', '$state', "account", "plugin-factory", "Name"
     , function($scope, $state, account, plugins, Name) {    
       console.log(Name);
     }
  ])

这是有效的，因为控制器由 UI-Router 实例化，作为状态转换的一部分.

And that is working, because controller was instantiated by the UI-Router, as a part of the state transition.

另一方面，如果我们将使用此扩展该示例(请参阅分叉损坏的版本) 中的 index.html 行(状态 def 之外)

If, on the other hand, we will extend that example with this (see forked broken version) line in the index.html (outside of the state def)

<div ng-controller="account-controller"></div>
<div ui-view=""></div>

问题会出现.为什么?因为现在控制器不由UI-Router管理.它不是由其基础设施注入的，也没有提供配置值 'Name'.它是普通角"样式..

The issue will appear. Why? Because now the controller is not managed by the UI-Router. It is not injected by its infrastructure, not provided with configured value 'Name'. It is "plain angular" style..

在此处检查工作解决方案和损坏的这里

Check the working solution here and the broken here

这篇关于ui 路由器解析抛出错误提供者未找到的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！