Closed dorcohen8 closed 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}}
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:
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}}
' }; });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}}
' }; });