Angularjs - 在加载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;
}

并在这里添加一个" ng-cloak "属性到您的div:

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

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

Answer 2

在您caseWrap元素,放ng-show="contentLoaded",然后,你目前已经$('#caseWrap').show();投入$scope.contentLoaded = true;

如果caseWrap元素在此控制器之外,则可以使用$ rootScope或events执行相同类型的操作.

Answer 3

将以下内容添加到CSS中:

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

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

UPDATE

您不应该在控制器中执行DOM操作.您可以做两件事...... 1.您可以通过指令拦截控制器范围内值的更改!在您的情况下,创建一个指令作为分配了您要监视的属性的属性.在你的情况下,它会caseData.如果casedata是假的,请隐藏它.否则,显示它.

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

码

var myApp = angular.module('myApp', []);
myApp.controller("caseCtrl", function ($scope, $http, $routeParams, $timeout) {
    $scope.caseData = null;
    //mimic a delay in getting the data from $http
    $timeout(function () {
        $scope.caseData = 'hey!';
    }, 1000);

})
    .directive('showHide', function () {
    return {
        link: function (scope, element, attributes, controller) {
            scope.$watch(attributes.showHide, function (v) {
                if (v) {
                    element.show();
                } else {
                    element.hide();
                }
            });
        }
    };
});

HTML

<div ng-controller='caseCtrl' show-hide='caseData'>using directive</div>
<div ng-controller='caseCtrl' ng-show='caseData'>using ngShow</div>

JSFIDDLE:http://jsfiddle.net/mac1175/zzwBS/