javascript - AngularJS を使用するサービスで promise を使用してディレクティブにデータをプリロードする

Question

誰かが私を助けてくれることを願っています。私はこれを理解することができませんでした。

データベース サーバーから非同期に取得した html データに基づいて、事前に作成された ul-list をページにダンプするディレクティブ (以下を参照) を作成しました。ディレクティブとサービスの両方が機能します。

「MenuService.getMenuData().then」の「then」は、データがディレクティブに到着するまで強制的に待機すると想定しましたが、データが到着する前にディレクティブが完了し、「3empty」メッセージが表示される方法もあります。ディレクティブは以前に完了しました。タイムアウトの遅延を設定できることはわかっていますが、それは良くありません。問題が何であるかについての提案はありますか? 私が使用した他の手法は、約束が完了したときにのみ ng-show="dataarrived" を配置し、dataarrived を true に設定することでした。しかし、同じ問題。

このディレクティブの目的は、サーブから Nav メニュー リストを取得して index.html に表示することですが、このコードをコントローラーに配置しても、サービスまたはディレクティブに配置しても同じ結果が得られます。それは何も示していません。これは、他のビューが表示される前に index.html に表示することに特有のものです。

それが理にかなっている場合、これが私の指示です。

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: '&'
    }
}

}