Angularjs - 隐藏的内容，直到DOM加载 [英] Angularjs - Hide content until DOM loaded

问题描述

我有在Angularjs一个问题，那里是我的HTML闪烁我的数据来自服务器回来。

I am having an issue in Angularjs where there is a flicker in my HTML before my data comes back from the server.

下面是视频演示该问题： http://youtu.be/husTG3dMFOM - 注意＃|和灰色区向右

Here is a video demonstrating the issue: http://youtu.be/husTG3dMFOM - notice the #| and the gray area to the right.

我曾尝试ngCloak没有成功（虽然ngCloak做prevent括号内出现的承诺），我想知道，直到HTML被角填充隐藏内容的最好方式。

I have tried ngCloak with no success (although ngCloak does prevent the brackets from appearing as promised) and am wondering the best way to hide content until the HTML has been populated by Angular.

我把它用在我的控制器此code的工作：

I got it to work with this code in my 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);
        });
}

...但我又听到一次不是操纵从控制器的DOM。我的问题是我怎么能做到这一点使用指令？换句话说，我怎么能隐藏指令附加到直到所有的内容从服务器加载的元素？

...but I have heard time and time again not to manipulate the DOM from a controller. My question is how can I achieve this using a directive? In other words, how can I hide the element that a directive is attached to until all content is loaded from the server?

推荐答案

有一个新的内置指令：

在您的 CSS 添加

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

和只添加一个 NG-斗篷属性，使你的div喜欢这里：

and just add a "ng-cloak" attribute to your div like here:

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

商务部：<一href=\"https://docs.angularjs.org/api/ng/directive/ngCloak\">https://docs.angularjs.org/api/ng/directive/ngCloak

这篇关于Angularjs - 隐藏的内容，直到DOM加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！