如何在AngularJS初始化之前阻止元素显示(ng-show)

Question

在AngularJS中,我想知道如何在ng-show生效之前阻止页面上显示的元素,我发现有些帖子谈论ng-cloak,但在我的情况下它似乎不起作用,可能是ng-cloak用于防止双花括号而不是元素风格.

有人谈论的另一种方式是在AngularJS初始化之前定义一些样式,但这有点难以管理.

有没有一些官方的方法来处理这个？

Answer 1

除非您想展示装载机,否则ng-cloak应该是您的解决方案.

关于ng-cloak的官方文件

如果你仍然有问题,你可以尝试添加css来隐藏你的html中的ng-cloak元素,以确保浏览器及时有它.

如果您这样做,请选择添加ng-cloak的方式.例如,将其添加为类:

<div ng-show="condition" class="ng-cloak">...</div>

并将其添加到您的html head标记中:

<style> .ng-cloak { display: none !important; } </style>

Answer 2

如果你想避免显示某些东西,直到它准备好显示(某些数据已经从后端加载),那么最好使用它ng-if.当然它的作用与之相同ng-show.但使用的优点ng-if是您可以延迟创建额外的DOM,直到需要显示它,从而改善初始页面加载时间.

这是一个例子:

var myApp = angular.module('myApp', []);


   
myApp.controller("myController", function ($scope, $timeout) {

    $scope.isLoading = false;
    $scope.data = null;
    
    simAsync();

    //simulate async task like http request
    function simAsync() {
        //loadind data has started
        $scope.isLoading = true;

        $timeout(function () {
            $scope.data = [{
                "firstname": "Sims",
                    "lastname": "Wilkerson"
            }, {
                "firstname": "Kelli",
                    "lastname": "Vazquez"
            }, {
                "firstname": "Mcdonald",
                    "lastname": "Byrd"
            }, {
                "firstname": "Taylor",
                    "lastname": "Frost"
            }, {
                "firstname": "Merle",
                    "lastname": "Adkins"
            }, {
                "firstname": "Garrett",
                    "lastname": "Hood"
            }];
            //the data has loaded
            $scope.isLoading = false;
        }, 1500);
    }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
    
</div>