Trying to inject an Angular module to my main module using oclazyload. Please note, I am not using RequireJs or oclazyload to load the JavaScript file currently. For now I added the module inside Index HTML Script tag.
The inject method executes without any error. But when I log $ocLazyLoad.getModules(), I don't see the module I wanted to inject.
Any help greatly appreciated.
Inline Script:
<script type="text/javascript">
var app = angular.module("ngNextGenWidget", []); //This is the module to be injected
app.factory('nextGenWidget', function () {
return {
constructControl: function ($compile, $scope) {
//Compile html fragment
var compileFunction = $compile("<div tools-Home-Page></div>")
//Get html output from directive after applying $scope
var htmloutputFromDirective = compileFunction($scope);
return htmloutputFromDirective;
}
}
});
app.directive('toolsHomePage', function () {
return {
restrict: 'A',
scope: true,
templateUrl: '/Content/Templates/DemoTemplate-1.html',
controller: ['$scope', function ($scope) {
$scope.name = 'Home Page';
}]
}
});
</script>
Main app:
appLazy.directive('testComponent', function () {
return {
restrict: 'E',
link: function (scope, element, attrs) {
scope.Execute(attrs, element, attrs.moduleName);
},
controller: ['$scope', '$compile', '$ocLazyLoad',
function ($scope, $compile, $ocLazyLoad) {
$scope.Execute = function (attr, element, moduleName) {
$ocLazyLoad.inject(moduleName);//trying to inject the module
var htmloutputFromDirective =
$nextGenWidget.constructControl($compile, $scope);
$(element).append(htmloutputFromDirective);
}
}]
};
});