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

问题描述

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

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

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

我让它在我的控制器中使用此代码:

var caseCtrl = function($scope, $http, $routeParams) {$('#caseWrap').hide();//使用 jQuery 触发时隐藏var id = $routeParams.caseId;$http({method: 'GET', url: '/v1/cases/' + id}).成功(功能(数据，状态，标题，配置){$scope.caseData = 数据；$('#caseWrap').show();//显示在服务器返回数据后使用 jQuery}).错误(功能(数据，状态，标题，配置){console.log('getCase Error', arguments);});}

...但我一次又一次地听到不要从控制器操作 DOM.我的问题是如何使用指令实现这一点?换句话说，在从服务器加载所有内容之前，如何隐藏指令所附加的元素?

解决方案

在你的 CSS 中添加:

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {显示:无！重要；}

然后像这样在你的div中添加一个ng-cloak"属性:

{{scoped_var}}

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

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

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

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.

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

...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?

解决方案

In your CSS add:

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

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

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

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

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