I am using angular js and ui router.
I am creating a wizard and I setup my ui-router with named views as below:
.state('app.common.import', {
url: '/import/:type',
views: {
'': {
controller: 'ImportCommonCtrl',
templateUrl: 'views/tmpl/import/common.html'
},
'method@app.common.import': {
controller: 'ImportCommonCtrl',
templateUrl: 'views/tmpl/import/common/method.html'
},
'result@app.common.import': {
templateUrl: 'views/tmpl/import/common/result.html',
controller: 'ImportResultCtrl',
},
'upload@app.common.import': {
controller: 'ImportUploadCtrl',
templateUrl: 'views/tmpl/import/common/upload.html',
resolve: {
plugins: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load([
'scripts/vendor/filestyle/bootstrap-filestyle.min.js'
]);
}]
}
}
}
})
My issue is that all the controllers are loaded when I access to the url /import/:type ...
I would like to load the controller when the view is displayed.
I have tried $rootScope .$on('$viewContentLoaded', function(event, viewConfig) {
But it doesn't work. Is there a way to do this?
Thanks,