2017-05-24 63 views
5

我使用角1.6爲我的項目和angular-ui路由與PugJs爲HTML模板路由。 我想在我的應用程序中實現Lazyload,但不知何故,它不工作可能是由於玉。 代碼:控制器是在DOM中加載,但視圖沒有加載,並找不到控制器oclazyload與玉(pugjs)

var app = angular.module('myApp',['ui.router','oc.lazyLoad']); 
app.config(['$ocLazyLoadProvider', function($ocLazyLoadProvider 
{ 
    $ocLazyLoadProvider.config({ 
    debug: true, 
    modules: [{ 
    name: 'js', 
    files: ['js/*'] 
}] 
}); 
}]); 

.state("exampleState", { 
     url: '/example', 
     templateUrl: '/example', 
     controller:'exampleCtrl', 

     resolve: { 
      deps: ['$ocLazyLoad', function($ocLazyLoad) { 
       return $ocLazyLoad.load({ 
        files: ['/js/exampleCtrl.js'] 
       }) 
      }] 
     } 
    }) 

控制器:

app.controller('exampleCtrl',function($scope){ 
    console.log('controller loaded'); 
}); 

和我使用的節點將這些玉石到HTML轉換前端,所以當「templateUrl」是由路由服務訪問會被重定向到該代碼:

app.get('/example', function(req, res) { 
    res.render('/example'); 
}); 

這會在視圖中加載example.jade。 我在控制檯中得到這個

[$ controller:ctrlreg]名稱爲'exampleCtrl'的控制器未註冊。

即使控制器文件在DOM中加載並且視圖也沒有呈現。任何有關問題的幫助歡迎。謝謝

+0

能否請您創建StackSnippet/Plnkr /的jsfiddle用最少的代碼來重現問題。 – Tushar

+0

當然@Tushar會在一段時間內更新! –

+0

很難從提供的代碼中分辨出來,但請確保您的決心正在兌現承諾。也許看到它是否呈現,如果你完全刪除解決方案。 – frikkievb

回答

4

經過太多的搜索和嘗試我找到了解決方案,問題是在構建控制器時模塊的全局變量。除了使用

app.controller('exampleCtrl',function($scope){ 
    console.log('controller loaded'); 
}); 

我用angular.module('myApp').controller(,,,);

參考:ocLazyLoad Issues

1

我認爲你應該做一點點不同。試試這個:

$stateProvider.state('exampleState', { 
    url: "/example", 
    views: { 
    "exampleLazyLoadView": { 
     controller: 'exampleCtrl', 
     templateUrl: '/example.html' 
    } 
    }, 
    resolve: { // Any property in resolve should return a promise and is executed before the view is loaded 
    loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) { 
      return $ocLazyLoad.load('/js/exampleCtrl.js'); 
    }] 
    } 
}); 
+0

已經嘗試過! –

+2

提供此作品的所有代碼燒烤。我認爲你在其他地方有問題(雙重檢查路徑)。我不確定'files:['js/*']'是否是有效的聲明。 –