Angular UI Router 解决抛出提供者错误 [英] Angular UI Router resolve throwing provider error

问题描述

我似乎在使用 Angular UI 路由器时遇到问题，并尝试向状态添加解析.奇怪的是，我把它放在另一个地方，而且工作正常.

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;

  }
]);

推荐答案

问题是我定义的控制器也用于我创建的用于显示 D3 图表的指令.从中删除定义的控制器修复了它.

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.

这篇关于Angular UI Router 解决抛出提供者错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！