在使用AngularJS的服務中使用Promise在Directive中預加載數據

Question

我希望有一個人可以幫助我。 我還無法弄清楚這一點。

我寫了一條指令（請參閱下文），將預先寫好的ul列表轉儲到基於從數據庫服務器異步檢索的html數據的頁面上。 指令和服務均有效。

我假設“ MenuService.getMenuData（）。then”中的“ then”將強制等待數據到達指令，但該指令如何完成並在數據到達之前顯示“ 3empty”消息，這表明指令較早完成。 我知道我可以設置超時延遲，但這不好。 您對問題可能有什么建議嗎？ 我使用的另一種技術是放置ng-show =“ dataarrived”並將dataarrived設置為true只在承諾完成時。 但是同樣的問題。

該指令的目的是從服務中檢索Nav菜單列表，並將其顯示在index.html上，但是將代碼放入控制器或服務或指令中都可以得到相同的結果。 它什么也沒顯示。 特別是在顯示任何其他視圖之前將其顯示在index.html中。

如果合理的話，這是我的指令。

TBApp.directive（'tbnavMenu'，函數（$ 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: '&'
    }
}

}

Answer 1

我可能會犯錯，但是如果您的服務在getMenuData方法中返回$ http對象，則這些行：

MenuService.getMenuData().then(function (val) {
    tbTemplate = val;
});

應該更改為：

MenuService.getMenuData().then(function (val) {
    tbTemplate = val.data;
});

要么

MenuService.getMenuData().success(function (val) {
    tbTemplate = val;
});

我個人的建議是使用.then選項，因為它可以連接更多的Promise。