Angularjs - 隐藏内容直到 DOM 加载

Question

我在 Angularjs 中遇到一个问题，在我的数据从服务器返回之前，我的 HTML 中出现闪烁。

这是演示该问题的视频:http://youtu.be/husTG3dMFOM - 注意#|和右侧的灰色区域。

我尝试过 ngCloak 但没有成功(尽管 ngCloak 确实阻止了括号按 promise 出现)，并且想知道在 Angular 填充 HTML 之前隐藏内容的最佳方法。

我让它在我的 Controller 中使用此代码:

var caseCtrl = function($scope, $http, $routeParams) {
    $('#caseWrap').hide(); // hides when triggered using jQuery
    var id = $routeParams.caseId;

    $http({method: 'GET', url: '/v1/cases/' + id}).
        success(function(data, status, headers, config) {                   
            $scope.caseData = data;

            $('#caseWrap').show(); // shows using jQuery after server returns data
        }).
        error(function(data, status, headers, config) {
            console.log('getCase Error', arguments);
        });
}

...但我一次又一次听到不要从 Controller 操作 DOM。我的问题是如何使用指令来实现这一目标？换句话说，如何隐藏指令所附加的元素，直到从服务器加载所有内容为止？

Answer 1

在您的 CSS 中添加:

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

然后只需向您的 div 添加一个“ng-cloak”属性，如下所示:

<div id="template1" ng-cloak>{{scoped_var}}<div>

文档:https://docs.angularjs.org/api/ng/directive/ngCloak