Angularjs – 隐藏内容,直到DOM加载

前端之家收集整理的这篇文章主要介绍了Angularjs – 隐藏内容,直到DOM加载前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在Angularjs有一个问题,在我的数据从服务器回来之前,我的HTML中有闪烁。

这里是一个视频演示的问题:http://youtu.be/husTG3dMFOM – 注意#|和灰色区域在右边。

我试过ngCloak没有成功(虽然ngCloak确实防止括号显示为承诺),我想知道隐藏内容的最佳方式,直到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,config) {
            console.log('getCase Error',arguments);
        });
}

…但我已经听到一次又一次不从控制器操纵DOM。我的问题是如何使用指令实现这个?换句话说,如何隐藏指令附加的元素,直到从服务器加载所有内容为止?

有一个新的内置指令:

在你的CSS中添加

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

并只需添加一个“ng-cloak”属性到您的div像这样:

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

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

猜你在找的Angularjs相关文章