延迟加载角度应用程序不加载指令答案

【问题标题】：Lazy loading angular app doesn't load a directive延迟加载角度应用程序不加载指令
【发布时间】：2016-06-13 15:58:31
【问题描述】：

我正在尝试使用 ui.router 和 oc.lazyLoad 在我的 Angular 应用程序中延迟加载指令。这是我的代码：

菜单：

<ul>
      <li><a ui-sref="home">Home</a></li>
      <li><a ui-sref="demo">Demo</a></li>
      <li><a ui-sref="test">Test</a></li>
    </ul>
    <ui-view></ui-view>

路线配置：

angular.module('app', ['ui.router', 'oc.lazyLoad'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
        $stateProvider
          .state("demo", {
            url:'/demo',
            views: {
              'lazyLoadView' : {
                template: '<demo-directive></demo-directive>'
              }
            },
            resolve : {
              loadDemoModule : ['$ocLazyLoad', function($ocLazyLoad) {
                console.log('resolving demo lazy load');
                return $ocLazyLoad.load('demo.js');
              }]
            }
          })
          .state("home", {
            templateUrl : 'core/home.html',
            url : '/home'
          })
}])

和指令：

angular.module('app').
directive('demoDirective', function() {

  return {
    restrict: 'E',
    scope: {},
    template: require('./demo-directive.html'),
    // templateUrl: 'demo-directive.html', 
    controllerAs: 'demo',
    controller : ['$timeout', function($timeout) {
      console.log('in directive controller');
    }]
  };

});

我没有错误，解析函数中的console.log 已显示，demo.js 文件已加载，但随后出现提示，控制台表单指令控制器未显示。我正在尝试遵循ocLazyLoad example的第一个示例

谢谢

【问题讨论】：

标签： javascript angularjs angular-ui-router oclazyload

【解决方案1】：

您尚未将 oc.lazyLoad 模块声明为依赖项。

angular.module('app.demo', ["oc.lazyLoad"])

查看快速入门 - https://oclazyload.readme.io/docs/

你也没有关闭你的演示指令

 template: '<demo-directive></demo-directive>'

【讨论】：

我更新了我的代码，我的路由配置附加到另一个包含 oclazyload 依赖项的模块。我更新了我的帖子。我还为指令添加了结束标记，但仍然是同样的问题。
您声明了两个单独的模块。 App 和 App.Demo，你需要连接它们，添加 app.demo 作为 app 的依赖。举个例子，看看 jon papa 的这个风格指南的模块部分。 github.com/johnpapa/angular-styleguide/blob/master/a1/… 另一种选择是将它们放在同一个模块中，因此您可以将“angular.module('app.demo', [])”更改为“angular.module('app')”
谢谢，我没有看到这个。我用“angular.module('app')”更新了我的代码，但仍然没有运气。

【解决方案2】：

这样延迟加载怎么样。

return $ocLazyLoad.load({
                        name: 'app.demo',
                        files: ['path/to/demo.js']
                    })

【讨论】：

感谢您的提示，不幸的是我的指令仍未加载。
既然你的应用模块和指令模块名称不同，是不是需要将你的指令模块名称注入主模块