Can anyone lend a hand? I've been struggling to solve this issue.
I created a directive (see below) to display a pre-written ul-list on a page using html data fetched asynchronously from a database server. Both the Directive and The Service are functioning correctly.
I assumed that the "then" in "MenuService.getMenuData().then" would ensure that the directive waits for the data to arrive before completion, but somehow the directive finishes and displays the '3empty' message before the data arrives, suggesting that the directive is completing prematurely. I tried setting a timeout delay as a workaround, but it's not an ideal solution. Any suggestions on what might be causing this problem?
The goal of this directive is to fetch the Nav menu list from the server and show it on the index.html page. However, regardless of whether I place this code in a controller, service, or directive, the result is always the same - nothing displayed. This seems to specifically relate to displaying it on the index.html before any other view is shown.
Here is the relevant part of my directive:
TBApp.directive('tbnavMenu', function ($compile, MenuService) { var tbTemplate = '3empty';
MenuService.getMenuData().then(function (val) {
tbTemplate = val;
});
var getTemplate = function () {
return tbTemplate;
}
var linker = function (scope, element, attrs) {
element.html(tbTemplate).show();
$compile(element.contents())(scope);
}
return {
restrict: "E",
replace: true,
link: linker,
controller: function ($scope, $element) {
$scope.selectedNavMenu = GlobalService.appData.currentNavMenu;
$scope.menuClicked = function ($event, menuClicked) {
$event.preventDefault();
$scope.selectedNavMenu = menuClicked;
$scope.tbnavMenuHander({ navMenuChanged: menuClicked });
};
$scope.isSelected = function (menuClicked) {
return $scope.selectedNavMenu === menuClicked;
}
},
scope: {
tbnavMenuHander: '&'
}
}
}