Angular.js-隐藏内容直到加载DOM

Question

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

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

我尝试了ngCloak，但没有成功（尽管ngCloak确实阻止了括号未如期出现），并且想知道隐藏内容的最佳方法，直到Angular填充HTML。

我在控制器中使用了以下代码：

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);
        });
}

…但是我一次又一次地听到不要从控制器操作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>

doc：https：//docs.angularjs.org/api/ng/directive/ngCloak