在加载AngularJS应用程序时避免显示HTML Angular标签。

25 浏览
0 Comments

在加载AngularJS应用程序时避免显示HTML Angular标签。

我是Angular JS的新手（我正在使用1.5.8版本），我正在按照docs.angularjs.org/tutorial的教程学习。

我有一个html代码：

{{application_name | uppercase }}

在main.js中设置了

$scope.application_name = 'app';

一切都进行得很顺利，但是每次我手动刷新页面或使用gulp重新加载时，页面会先渲染出html，用户会看到`application_name`以大写字母打印出来，然后才渲染出想要的值。

我的问题是：

有没有办法在首次渲染页面时避免显示Angular JS表达式？

我希望当我进入本地页面时，页面显示app而不是application_name。

0

3 答案

0 Comments

避免在加载AngularJS应用程序时显示HTML Angular标签

当在加载AngularJS应用程序时，有时会出现显示HTML Angular标签的问题。有两种方法可以解决这个问题。

第一种方法是避免使用大括号{{}}来绑定数据。例如，可以使用ng-bind指令来替代大括号。下面是一个示例：

第二种方法是使用ng-cloak指令。ng-cloak指令用于防止在应用程序加载时，浏览器以原始（未编译）形式显示Angular HTML模板。使用该指令可以避免不希望出现的HTML模板闪烁效果。下面是一个示例：


    
{{ application_name | uppercase }}

关于ng-bind和ng-cloak之间的区别，可以参考以下链接：[Differences between ng-bind and ng-cloak in angularjs](https://stackoverflow.com/questions/31580159)。

从该链接的总结中可以得知：

- `ngBind`指令告诉Angular用给定表达式的值替换指定HTML元素的文本内容，并在该表达式的值发生变化时更新文本内容。

- `ngCloak`指令用于防止在应用程序加载时，浏览器以原始（未编译）形式显示Angular HTML模板。使用该指令可以避免HTML模板显示时产生不希望的闪烁效果。

通过使用这两种方法之一，可以避免在加载AngularJS应用程序时显示HTML Angular标签的问题。

0
0 Comments

避免在加载AngularJS应用程序时显示HTML Angular标签的方法是使用ng-bind指令代替，这样只会显示解析后的值。

解决方法：

使用ng-bind指令将值绑定到需要显示的标签上，这样在加载AngularJS应用程序时，只会显示解析后的值，而不会显示HTML Angular标签。在上述示例中，ng-bind指令将应用程序名称绑定到h1标签上，并使用管道符号将其转换为大写。

0
0 Comments

问题：如何在加载AngularJS应用程序时避免显示HTML Angular标签？

原因：加载AngularJS应用程序时，由于浏览器会在其原始（未编译）形式中短暂地显示Angular HTML模板，会导致不必要的闪烁效果。

解决方法：使用ngCloak指令。

ngCloak指令用于防止在加载应用程序时，浏览器以其原始形式显示Angular HTML模板。使用这个指令可以避免不希望的闪烁效果。

以下是使用ngCloak指令的示例代码：

<div class="jumbotron">
  <h1 ng-cloak>{{application_name | uppercase }}</h1>
    <p class="lead" >
</div>

0