javascript - 阻止 ng-class 出现直至解决

Question

我使用 ng-class 和三元运算符来动态设置字形。我的问题是，在 else block 中设置的任何字形都会在表达式解析之前出现一秒钟。下面是我的 HTML。 header 只是我的 Controller 的范围，并且 header.status 在从我的 API 获取数据后在我的 Controller 中设置。

<i ng-class="header.status === 'single' ? 'glyphicon glyphicon-user pull-left' : 'glyphicon glyphicon-parents pull-left'"></i>

注意:我尝试添加 ng-cloak，但没有什么区别。

Answer 1

如果您想隐藏 <i> ，你可以使用 ng-show:

<i ng-show="header.status" ng-class="header.status === 'single' ? 'glyphicon glyphicon-user pull-left' : 'glyphicon glyphicon-parents pull-left'"></i>

如果你想隐藏所有类直到 header.status设置后，您可以添加另一个三元组:

<i ng-class="header.status ? (header.status === 'single' ? 'glyphicon glyphicon-user pull-left' : 'glyphicon glyphicon-parents pull-left') : ''"></i>

或者更好的是，向 Controller 添加一个整洁的数组:

$scope.statusArray = [];
dataService.getData().then(function() {
    $scope.statusArray.push("glyphicon", "pull-left");
    if(header.status === 'single') {
        $scope.statusArray.push("glyphicon-user");
    }
    else {
        $scope.statusArray.push("glyphicon-parents");
    }
});

并将其用作您的 ng 类:

<i ng-class="statusArray"></i>

Sort of non-representative Fiddle :)