0

我希望有一个人可以帮助我。我一直无法弄清楚这一点。

我写了一个指令（见下文），根据我从数据库服务器异步检索的 html 数据在页面上转储预先编写的 ul 列表。指令和服务都有效。

我假设“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: '&'
    }
}

}

4

1 回答 1

0

我可能错得离谱，但如果您的服务在 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。

于 2013-10-23T04:29:36.513 回答