避免在页面加载时显示表达式

12 浏览
0 Comments

避免在页面加载时显示表达式

在一段AngularJS的视频中,我看到了如何避免在Javascript解析之前表达式可见。但是我忘记了具体是怎么做的...

我有一个{{$root.initializing.status}},我想在AngularJS有机会解析之前显示"加载中..."。这该如何实现?

0
0 Comments

避免在页面加载时显示表达式的原因是,页面加载时AngularJS会先渲染HTML,然后再执行JavaScript代码,因此在页面加载时,表达式可能会被显示出来。

解决这个问题的方法是使用AngularJS提供的ng-cloak指令。ng-cloak指令可以在页面加载时隐藏带有ng-bind指令的HTML元素,直到AngularJS完成数据绑定为止。

要解决这个问题,只需要将ng-cloak指令添加到包含ng-bind指令的HTML元素上即可:

<div id='message' ng-cloak><span ng-bind="$root.initializing.status"></span></div>

这样,在页面加载时,{{ $root.initializing.status }}表达式将不会被显示出来,直到AngularJS完成数据绑定后才会显示出实际的值。

0
0 Comments

避免在页面加载时显示表达式的问题可能会导致页面加载时展示未渲染的表达式。为了解决这个问题,可以使用ng-cloak或ng-bind指令。

ng-cloak指令可以在页面加载时隐藏未渲染的表达式,使用方法如下:

{{ 'hello' }}

ng-bind指令可以将一个表达式绑定到指定元素上,使用方法如下:

Hello !

根据需要选择使用哪个指令。如果只是需要隐藏未渲染的表达式,可以使用ng-cloak指令。如果需要将元素作为占位符,可以使用ng-bind指令。

以上内容参考自:https://stackoverflow.com/a/14076004/1172872

0
0 Comments

避免页面加载时显示表达式的问题

在页面加载时,有时候会出现表达式被显示出来的问题。为了解决这个问题,可以使用ng-cloak指令,并在CSS中添加以下代码,如果它是页面中首先加载的内容。

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

这将确保你的div模板被隐藏。在该div模板下面,添加类似于"Loading..."的内容。通过将$root.initializing.status赋值为true,ng-hide指令将生效。

以下是一个示例代码:

HTML:

{{$root.initializing.status}}
Loading...

JS:

function Ctrl($timeout, $scope) {
    // 模拟加载过程
    $timeout(function () {
        $scope.$root = {
            initializing: {
                status: 'Complete!'
            }
        }
    }, 2000);
}

你可以在这里查看这个示例的jsfiddle链接:[http://jsfiddle.net/zSwFd/](http://jsfiddle.net/zSwFd/)。

0