2016-03-01 60 views
0

我試圖懶惰加載我的角應用程序中的一個指令,使用ui.router和oc.lazyLoad。這裏是我的代碼:延遲加載角應用程序不加載指令

菜單:

<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

感謝

回答

0

您還沒有宣佈oc.lazyLoad模塊作爲一個依賴遵循的第一個例子。

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

參考Quickstart - https://oclazyload.readme.io/docs/

你還沒有關閉您的演示指令

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

我更新了我的代碼,我的路由配置被連接到另一個包含oclazyload依賴項的模塊。我更新了我的帖子。我還爲指令添加了結束標記,但仍然是同樣的問題。 – magneto

+0

你正在聲明兩個獨立的模塊。 App和App.Demo,你需要連接它們,添加app.demo作爲app的依賴。 僅作爲示例,請參閱jon papa撰寫的此風格指南的模塊部分。 https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#modules 另一種選擇是讓他們在同一個模塊,所以你會改變這個「angular.module('應用程序.demo',[])「to」angular.module('app')「 –

+0

謝謝,我沒有看到這個。我用「angular.module('app')」更新了我的代碼,但仍然沒有運氣。 – magneto

1

如何延遲加載這樣。

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

感謝您的提示,不幸的是我的指令仍然沒有加載。 – magneto

+0

由於您的應用程序模塊和指令模塊名稱不同,是否需要將您的指令模塊名稱注入主模塊 – nabin