Question

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

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

有没有一些官方方法可以解决这个问题？

Answer 1

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

如果您仍有问题，可以尝试在html中添加css隐藏带有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>

Answer 3

使用如下的加载程序：

<强> JS

 angular.element(document).ready(function(){
      $('.loading').remove(); // Just an example dont modify the dom outside of a directive in a real app!
      alert('Loaded!'); 
    });

<强> CSS

.loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  color: #000;
}

<强>样本

http://codepen.io/nicholasabrams/pen/MwOMNR

我刚才在这里回答了类似的话题：Angularjs tab Loading spinner while rendering

Answer 4

2种完全避免问题的方法：

ngBind

<span ng-bind="expression_without_braces"></span>

如果模板在AngularJS编译之前由浏览器暂时以其原始状态显示，则最好使用ngBind而不是{{ expression }}。由于ngBind是元素属性，因此在页面加载时，绑定使用户不可见。

使用ui-router将HTML保留在单独的文件中，仅在需要时且仅在控制器初始化时才会加载/解析/注入HTML。

以下是hello world tutorial的修改，以使用单独的HTML文件：

// helloworld.js
var myApp = angular.module('helloworld', ['ui.router']);

myApp.config(function($stateProvider) {
  var helloState = {
    name: 'hello',
    url: '/hello',
    templateUrl: 'helloworld.html'
  }

  $stateProvider.state(helloState);
});

<!-- helloworld.html -->
<h3>hello world!</h3>

<!-- index.html -->
<html>
  <head>
    <script src="lib/angular.js"></script>
    <script src="lib/angular-ui-router.js"></script>
    <script src="helloworld.js"></script>
  </head>

  <body ng-app="helloworld">
    <a ui-sref="hello" ui-sref-active="active">Hello</a>

    <ui-view></ui-view>
  </body>
</html>

Answer 5

Angular现在支持ng-cloak。它已经被定义为类和指令：

我像这样使用它作为指令：

<select
  className="custom-select"
  id="inputGroupSelect01"
  onChange={this.onChangeCollege} 
>
  ...
</select>

您也可以像这样将其用作类：

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

Answer 6

只需在服务器端模板中初始化 AngularJs 控制器时使用属性 ng-cloak

<div class="right_col col-md-9" role="main" data-ng-controller="SearchController as v"
 ng-init="v.init('<?= $catalog['id'] ?>')" ng-cloak>

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

6 个答案: