Hey there! I'm currently utilizing the tg-dynamic-directive to loop through a JSON file and display the tree structure shown in the attached image.
https://i.sstatic.net/Ph6Cs.png
One major issue I'm facing is performance degradation when the "tree" becomes very large, causing the browser to struggle with rendering numerous items (we're talking about cases where there are 1000 or more items). To address this, I am trying to load only the first two levels initially, keeping the rest collapsed. When a user clicks on the expand arrow of each element, I want to dynamically render its children by running the tg-dynamic-directive again.
During the initial template rendering process, I have included the following snippet to determine if it's the first two levels:
$scope.getView = function (item) {
if (typeof item != 'undefined') {
if(item.type == 'course' || item.type == 'label' || item.type == 'module' || item.type == 'course_assessment' || item.type == 'module_assessment') {
return 'nestable_item.html';
} else {
return null;
}
} else {
return null;
}
};
Subsequently, I need to trigger the directive again when the expand arrow is clicked. Below is the directive in question:
angular.module('tg.dynamicDirective', [])
.directive('tgDynamicDirective', ['$compile',
function($compile) {
'use strict';
function templateUrlProvider(getView, ngModelItem) {
if (getView) {
if (typeof getView === 'function') {
var templateUrl = getView(ngModelItem) || '';
if (templateUrl) {
return templateUrl;
}
} else if (typeof getView === 'string' && getView.length) {
return getView;
}
}
return '';
}
return {
restrict: 'E',
require: '^ngModel',
scope: true,
template: '<div ng-include="templateUrl"></div>',
link: function(scope, element, attrs, ngModel) {
scope.$watch(function() {
var ngModelItem = scope.$eval(attrs.ngModel);
var getView = scope.$eval(attrs.tgDynamicDirectiveView);
scope.ngModelItem = ngModelItem;
return templateUrlProvider(getView, ngModelItem);
}, function(newValue, oldValue) {
scope.templateUrl = newValue;
});
}
};
}
]);
My question is: How can I retrigger the tg-dynamic-directive when the expand arrow is clicked from the controller?