避免在页面加载时显示表达式 [英] Avoiding expressions being shown on page load

问题描述

在一段 AngularJS 视频中，我看到了如何在 Javascript 解析表达式之前避免表达式可见.但我不记得它是怎么做的...

我有一个 <div id='message'>{{$root.initializing.status}}</div> 我想说正在加载..." 在 AngularJS 有机会解析它之前.这怎么办?

解决方案

正如其他人提到的，使用 ng-cloak 但如果它是第一个加载到您的页面中，也可以将以下内容添加到您的 CSS 中.

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

这将确保您的 div 模板被隐藏.在该 div 模板下方，添加类似

的内容正在加载...

$root.initializing.status 的赋值导致 ng-hide 为真值.

这是jsfiddle，代码如下:

HTML:

<div id='message'>{{$root.initializing.status}}</div><div ng-hide="$root.initializing.status">正在加载...</div>

JS:

function Ctrl($timeout, $scope) {///模拟加载$超时(函数(){$scope.$root = {初始化:{状态:完成！"}}}, 2000);}

In an AngularJS video at one point I saw how to avoid an expression being visible before the Javascript parses it. But I can't remember how it was done...

I have a <div id='message'>{{$root.initializing.status}}</div> that I'd like to say "Loading..." before AngularJS has a chance to parse it. How can this be done?

解决方案

As the others mentioned, use ng-cloak but also add the following to your CSS if it is the first to load in your page.

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

This will ensure that your div template is hidden. Below that div template, add something like

Loading...

The assignment of the $root.initializing.status with cause a true value for ng-hide.

Here is the jsfiddle and the following is the code:

HTML:

<div ng-controller='Ctrl'>
    <div id='message'>{{$root.initializing.status}}</div>
    <div ng-hide="$root.initializing.status">Loading...</div>
</div>

JS:

function Ctrl($timeout, $scope) {
///simulating loading
    $timeout(function () {
        $scope.$root = {
            initializing: {
                status: 'Complete!'
            }
        }
    }, 2000);
}

这篇关于避免在页面加载时显示表达式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！