角UI路由器决心投掷提供程序错误 [英] Angular UI Router resolve throwing provider error

问题描述

我似乎有与角UI路由器的问题，并试图下决心增加的状态。奇怪的是，我有它在另一个地方，它工作正常。

我在我分开code伸到不同的组件领域，我的code结构是这样的：

  /应用
  /组件的仪表板
    index.js
    /控制器
      DashboardCtrl.js
  /组件图1
    index.js
    /控制器
      Chart1Ctrl.js
 

例如我有根仪表板和能正常工作：

  // index.jsangular.module（AZ-CI）
的.config（[
  '$ stateProvider'，
  功能（$ stateProvider）{    $ stateProvider
      .STATE（仪表盘，{
        templateUrl：/app/ci-dashboard/templates/dashboard.html'，
        网址：'/'，
        控制器：'DashboardCtrl'，
        解析：{
          chartList：功能（）{
            返回[{
              名称：图1，
              状态：dashboard.chart1
            }];
          }
        }
      }）;
  }
]）;//仪表盘Ctrl键
angular.module（AZ-CI）
.controller（'DashboardCtrl'，[
  '$范围'，
  '$ rootScope'，
  chartList'，
  功能（$范围，$ rootScope，chartList）{    $ scope.chartList = chartList;  }
]）;
 

然而，在图表组件，我得到以下错误本（简体）code：

  //错误
错误：[$喷油器：unpr]未知提供商：productListProvider＆LT;  - 产品中心// index.js
angular.module（AZ-CI）
的.config（[
  '$ stateProvider'，
  功能（$ stateProvider）{    $ stateProvider
      .STATE（'dashboard.chart1'，{
        templateUrl：/app/ci-chart-1/templates/chart.html'，
        网址：'/图/ chart1'，
        控制器：'Chart1Ctrl'，
        解析：{
          productList的：'CSV'，'$ stateParams'，函数（CSV，$ stateParams）{
            返回{};
          }]
        }
      }）;
  }
]）;// Chart1Ctrl
angular.module（AZ-CI）
.controller（'Chart1Ctrl'，[
  '$范围'，
  '$ rootScope'，
  '$州'，
  productList的，
  功能（$范围，$ rootScope，$状态，productList的）{    $ scope.products = productList的;  }
]）;
 

解决方案

但问题是我定义也可以在我创建显示一个D3图表指令所使用的控制器。卸下定义控制器从它固定它。

I seem to be having an issue with Angular UI router and trying to add a resolve to a state. The weird thing is, that I have it in another place and it works fine.

I'm separating my code out into different component areas, my code structure is like this:

/app
  /component-dashboard
    index.js
    /controllers
      DashboardCtrl.js
  /component-chart-1
    index.js
    /controllers
      Chart1Ctrl.js

For example I have the root dashboard and this works fine:

// index.js

angular.module('az-ci')
.config([
  '$stateProvider',
  function($stateProvider) {

    $stateProvider
      .state('dashboard', {
        templateUrl: '/app/ci-dashboard/templates/dashboard.html',
        url: '/',
        controller: 'DashboardCtrl',
        resolve: {
          chartList: function() {
            return [{
              name: 'Chart 1',
              state: 'dashboard.chart1'
            }];
          }
        }
      });
  }
]);

// Dashboard Ctrl
angular.module('az-ci')
.controller('DashboardCtrl', [
  '$scope',
  '$rootScope',
  'chartList',
  function($scope, $rootScope, chartList) {

    $scope.chartList = chartList;

  }
]);

However in chart component, I get the following error with this (simplified) code:

// Error
Error: [$injector:unpr] Unknown provider: productListProvider <- productList

// index.js
angular.module('az-ci')
.config([
  '$stateProvider',
  function($stateProvider) {

    $stateProvider
      .state('dashboard.chart1', {
        templateUrl: '/app/ci-chart-1/templates/chart.html',
        url: '/chart/chart1',
        controller: 'Chart1Ctrl',
        resolve: {
          productList: ['csv', '$stateParams', function(csv, $stateParams) {
            return {};
          }]
        }
      });
  }
]);

// Chart1Ctrl
angular.module('az-ci')
.controller('Chart1Ctrl', [
  '$scope',
  '$rootScope',
  '$state',
  'productList',
  function($scope, $rootScope, $state, productList) {

    $scope.products = productList;

  }
]);

解决方案

The problem was I had defined the controller to also be used in a Directive I created to display a D3 chart. Removing the defined controller from it fixed it.

这篇关于角UI路由器决心投掷提供程序错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！