ocombe / ocLazyLoad

Lazy load modules & components in AngularJS
https://oclazyload.readme.io
MIT License
2.63k stars 510 forks source link

Component's controller not executing #303

Open cmduffy opened 8 years ago

cmduffy commented 8 years ago

I have a question regarding ocLazyLoad and Angular 1.5 components.

When the lazy loaded module is set up like this everything works fine, and the controller loads the data like it is supposed to. The mn-container.html file contains ng-controller='MnController'.

angular.module('TestApp')
    .directive('mnContainer', function() {
        return {
            templateUrl: 'mn-container.html'
        };
    })
    .controller('MnController', ['$scope', function MnController($scope) {
        $scope.mnImg = require('./img/mn.jpg');
        $scope.mnAltText = 'Under Construction';
    }]);

But when a module is set up like this, the controller does not execute so the data is not loaded. The mn-comp-container.html file does not contain ng-controller and it works fine except when ocLazyLoaded. And there are no errors in the console or success & error callbacks.

angular.module('TestApp')
    .component('mnCompContainer', {
        templateUrl: 'mn-comp-container.html',
        controller: function MnCompContainerController() {
            this.img = require('./img/mn.jpg');
            this.altText = 'Under Construction';
        }
    });

So the question is, when using ocLazyLoad, how can I get a controller which is defined inside a component definition to execute so it can load its data?

knvpk commented 8 years ago

I think, oclazyload will not parse components, may be want to do feature request.

cmduffy commented 8 years ago

I found the same problem when a controller is defined within a directive. It seems that the controller function needs to be defined at the module level (module.controller...)? So this will work properly - the controller function is executed

angular.module('TestApp')
    .component('mnCompContainer', {
        templateUrl: 'mn-comp-container.html',
        controller: 'MnCompContainerController'
    })
    .controller('MnCompContainerController', function () {
        this.img = require('./img/mn.jpg');
        this.altText = 'Under Construction';
    });

How would I do a feature request?

cmduffy commented 8 years ago

(did not mean to close this - hit the wrong button when commenting so re-opening)

ocombe commented 8 years ago

Yes it doesn't really work well with controller components. A PR to fix it would be nice :)