Question

我试图使用带有lazyload的ui-router，从chrome我可以看到加载了所需的js但是angular会抛出错误。

从错误我可以告诉控制器没有初始化，附上路由器代码：

var app = angular.module('aaaaa', ['oc.lazyLoad', 'ui.router']);

app.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/pages/dashboard');

  $stateProvider.state('index', {
    url: '/pages/:name',
    templateUrl: function($stateParams) {
      return 'templates/' + $stateParams.name + '.html';
    },
    controllerProvider: function($stateParams) {
      return $stateParams.name;
    },
    resolve: {
      loader: ['$ocLazyLoad', '$stateParams', function($ocLazyLoad, $stateParams) {
        var url = 'templates/controllers/' + $stateParams.name + '.js';
        console.log(url);

        return $ocLazyLoad.load({
          name: 'aaaaa',
          files: [url]
        });
      }]
    }
  });
});

我错过了什么吗？

Answer 1

我会重构你的resolve.loader函数：

loader: ['$ocLazyLoad', '$stateParams', function($ocLazyLoad, $stateParams) {
  var url = 'templates/controllers/' + $stateParams.name + '.js';

  return $ocLazyLoad.load(url).then(function () {
    return $stateParams.name;
  });
}]

现在，当ocLazyLoad成功加载您的控制器代码时，我们会返回您控制器的名称（我假设它的实际名称与$stateParams.name的名称相匹配，因为这是你在controllerProvider中引用它的方式）。

然后在controllerProvider：

controllerProvider: function (loader) {
  return loader;
}

controllerProvider现在接受已解析的值，而不仅仅是stateParams - 根据以下提交：ui-router#851f8e46。

这是0.2.14中引入的，此后一直是changed again，它现在支持resolved函数中的templateUrl值。

另外，如果你升级到0.2.15，你可以将loaded传递给你的templateUrl函数而不是`$ stateParams.name。统治所有人的一个价值是什么？

对于它，我会事先在debugger函数的顶部放置一个controllerProvider语句来检查$stateParams.name并确保它与{{{1}相同1}} $stateParams.name函数内部。 哎呀。

此外，它可以证明非常有助于查看抛出的错误，开发控制台输出以及控制器/模块的实现细节。

Answer 2

问题解决了。

在单独的控制器文件中，你不能写这个，

app.controller ('xxx', [ ... ]);

相反，请使用

angular.module('xxxx').controller ('xxx', [ ... ])

我不知道为什么，但它确实有效。

oc.lazyload不使用ui-router，js已加载但控制器未初始化

2 个答案: