Angularjs-在加载DOM之前隐藏内容

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

下面是一个演示该问题的视频：-注意右边的#|和灰色区域

我尝试过Ng斗篷，但没有成功（尽管Ng斗篷确实阻止了括号按承诺出现），我想知道在HTML中填充Angular之前隐藏内容的最佳方法

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

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。我的问题是如何使用指令实现这一点？换句话说，在从服务器加载所有内容之前，如何隐藏指令所附加的元素？

将以下内容添加到CSS中：

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

角度模板的编译速度不够快

更新 您不应该在控制器中进行DOM操作。你可以做两件事。。。 1.您可以通过指令截获控制器范围内的值更改！在您的情况下，创建一个指令作为指定了要监视的属性的属性。在您的情况下，它将是

caseData

。如果案例数据是错误的，请隐藏它。否则，请展示它

更简单的方法是使用ngShow='casedata'

代码 HTML

使用指令
使用ngShow

---

jsiddle:

在caseWrap元素上，放置

ng show=“contentload”

，然后放在当前有

$（'#caseWrap'）.show（）的位置

put

$scope.contentLoaded=true

如果caseWrap元素在此控制器之外，则可以使用或来执行相同的操作。
既然您请求指令，请尝试此操作

.directive('showOnLoad', function() {
  return {
    restrict: 'A',
    link: function($scope,elem,attrs) {

      elem.hide();

      $scope.$on('show', function() {
        elem.show();
      });

    }
  }
});

在元素和控制器中插入$rootScope（加载时显示），并在加载html后使用此广播事件

$rootScope.$broadcast('show');

在CSS中添加：

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

只需在div中添加一个“ng-clope”属性，如下所示：

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

{{scoped_var}

doc:
我使用Zack的响应创建了一个“加载”指令，这可能对某些人有用

模板：

<script id="ll-loading.html" type="text/ng-template">
  <div layout='column' layout-align='center center'>
    <md-progress-circular md-mode="indeterminate" value="" md-diameter="52"></md-progress-circular>
  </div>
</script>

这个例子在html中使用了棱角材料，被接受的答案不适合我。我有一些元素有ng show指令，即使有ng斗篷，这些元素也会暂时显示出来。在ng show返回false之前，ng斗篷似乎已解决。将ng hide类添加到我的元素中修复了我的问题。
@scottybolinger我还应该告诉您不要在控制器中进行DOM操作。这被认为是一种不好的做法，而不是。（请参阅中的“正确使用控制器”）。我会尽快更新我的答案，知道如何解决这个问题了。非常感谢！谢谢你的回复。上述答案更有效。我只是要求一个新的指令，因为我不知道这可以通过ngShow指令来实现！只是：）很好，帮我省了一个大麻烦，非常感谢。Angular doc对此不清楚，看起来他们说CSS已经嵌入，但它不是。谢谢你的提示！很好，解决了：）嘿，我认为这个答案现在应该是被接受的；）
<div id="template1" ng-cloak>{{scoped_var}}<div>

<script id="ll-loading.html" type="text/ng-template">
  <div layout='column' layout-align='center center'>
    <md-progress-circular md-mode="indeterminate" value="" md-diameter="52"></md-progress-circular>
  </div>
</script>

    directives.directive('loading', function() {
  return {
    restrict: 'E',
    template: 'll-loading.html',
    link: function($scope,elem,attrs) {

      elem.show();

      $scope.$on('loaded', function() {
        console.log("loaded: ");
        elem.hide();
      });

    }
  }
});