ocombe / ocLazyLoad

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

simple ocLazyLoad angular 1.5.9 component isn't loading #410

Closed dorcohen8 closed 6 years ago

dorcohen8 commented 6 years ago

I'm trying to use ocLazyLoad simple example.
It is working when I use angular directive but not working when I'm using angular component.

The index.html is:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.js"></script>
        <script src="../../dist/ocLazyLoad.js"></script>

    </head>
    <body>
        <h3>Lazy load succeded if you can see 'Hello world' below</h3>
        <div id="example" ng-app="LazyLoadTest" ng-controller="TestController"></div>
        <script>
            angular.module("LazyLoadTest", ["oc.lazyLoad"])
                .controller("TestController", function($scope, $ocLazyLoad, $compile) {
                    $ocLazyLoad.load("js/testApp.js").then(function() {
                        console.log('loaded!!');
                        var el, elToAppend;
                        elToAppend = $compile('<say-hello to="world"></say-hello>')($scope);
                        el = angular.element('#example');
                        el.append(elToAppend);
                    }, function(e) {
                        console.log('errr');
                        console.error(e);
                    })
                });
        </script>
    </body>
</html>

Now on testApp.js when using directive it's working:

```

angular.module("testApp", []).directive("sayHello", function() { return { scope: { to: '@to' }, restrict: "E", template: '

Hello {{to}}

' }; });


But when trying to replace the directive with component it's not working anymore

angular.module("testApp", []).component("sayHello", function() { return { bindings: { to: '@to' }, controller: function($scope){ debugger; console.log(this.$scope.to); }, controllerAs: 'myCtrl', template: '

Hello {{myCtrl.to}}

' }; });