I have created a custom Directive.
The issue I am facing is that the html template is not being rendered.
Upon debugging, I noticed that the link function is never called because the instance function is also never called.
To troubleshoot, I added "debugger;"
The "debugger;" statement with the //first remark does get called. This confirms that the directive js file is loaded with lazy loading.
Here is my directive:
module kz.controls.products.details {
'use strict';
debugger;//First
import IDropDown = kz.controls.common.IDropDown;
import FilterItemModel = WebApi.Core.Models.Common.FilterItemModel;
...
</section>
This is my template directive:
<form name="newEggTabForm" class="form-details">
<div block-ui="main">
...
</div>
</div>
</section>
</div>
...
This is where I use the directive:
<div class="tab-content" ng-repeat="tab in vm.tabsVisibility.newEggTabs" ng-if="vm.selectedTab == 'newegg-'+tab.newEggSellerId">
<div oc-lazy-load="vm.lazyLoadParams">
<div data-kz-newegg-tab data-details="vm.newEggDetailsTabs['newegg-'+tab.newEggSellerId]"></div>
</div>
</div>