使用提供程序运行命令 onEntet

Question

我正在使用 ui-router 来更改 AngularJS 应用程序中的状态。我有一个提供程序，它使用 JavaScript 在存在 div 的 HTML 中创建图形。只有一个视图具有我的图形提供程序使用的 div 元素，因此我想在进入该状态时调用 graphProvider.drawGraph()。

我正在努力绘制图表：我得到的错误是，“未捕获的错误：[$injector:modulerr] 无法实例化模块 dataPortalApp，原因是： 错误：[$injector:modulerr] 无法实例化模块 graphProvider 由于： 错误：[$injector:nomod] 模块“graphProvider”不可用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。”

我的 router.js 看起来像：

(function() {
  angular.module('dataPortalApp')
    .config(DataPortalRouter);

  DataPortalRouter.$inject = ['$stateProvider', '$urlRouterProvider', '$locationProvider', 'graphProvider'];

  function DataPortalRouter($stateProvider, $urlRouterProvider, $locationProvider, graphProvider) {
    $urlRouterProvider.otherwise("/");
$stateProvider
  .state('dashboard', {
    url: '/dashboard',
    templateUrl: '/views/_dashboard.html',
    onEnter: function() {
      graphProvider.drawGraph()
    }
  })
  .state('index', {
    url: '/',
    templateUrl: '/views/_index.html'
  });

  }//end DataPortalRouter

})();

我的应用，js 看起来像：

(function(){
  angular.module('dataPortalApp', ['ui.router', 'graphProvider']);
})();

非常感谢任何帮助！

Answer 1

确保您的所有模块脚本都以正确的顺序导入。 新的顺序应该是：

1. angular.js
2. angular-ui-router.js
3. app.js
4. graphProvider.js（在 app.js 之后，因为它是您模块的一部分，而不是我最初认为的另一个模块。）

并删除graphProvider的模块依赖：

App.js：

(function(){
  angular.module('dataPortalApp', ['ui.router']);
})();