Question

我的html中的表达式{{heading + message}}应该根据我的代码呈现为Message:。

当我输入值并单击按钮时，它会渲染变量heading和message的值。

所以预期的功能正在发挥作用。

但问题是关于表达式应该的初始加载渲染为Message:代替expression本身 {{heading + message}}。

我通过http://localhost:8080/examples/first.html访问该页面，我尝试过safari和chrome。

问题的性质：

表达式在第一次加载时呈现为：{{heading + message}} 几秒（除非我刷新页面）。

最终会呈现，但我的问题是为什么需要在我的.js文件中呈现标题Message:。

我不确定，它可能不是处理器，因为我在osx上的 Node.js / Express服务器上使用2.4 GHz Intel Core i5 < / p>

HTML：

<!DOCTYPE html>
<html ng-app="firstApp">
<head>
    <title>First AngularJS App</title>
</head>
<body>
    <div ng-controller="FirstController">
        <span>Name:</span>
        <input type="text" ng-model="first" />
        <input type="text" ng-model="last" />
        <button ng-click="updateMessage()">Message</button>
        <hr>
        {{heading + message}}
    </div>
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
    <script src="js/first.js"></script>
</body>
</html>

.js：

var firstApp = angular.module('firstApp', []);
firstApp.controller('FirstController', function ($scope) {
    $scope.first = '';
    $scope.last = '';
    $scope.heading = 'Message: ';
    $scope.updateMessage = function () {
        $scope.message = 'Hello ' + $scope.first + ' ' + $scope.last + ' !';
    };
});

任何指针都会有所帮助。以下是最初看起来像是几秒钟之后的屏幕截图：

Expression

VS

value

编辑：第一次加载不是这样。这也会发生在新标签上的后续加载中，而不是像第一次加载那样慢但是确实发生了。 你认为我应该尝试不同的任何事情吗？

Answer 1

我认为根据ngCloak文档，它将摆脱闪烁的问题https://docs.angularjs.org/api/ng/directive/ngCloak

，ng-cloak的工作原理是它对使用它的项目添加display：none！important。

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

此指令可应用于body元素，但首选用法是应用多个ngCloak

   <span ng-cloak>{{heading + message}}</span>

根据ng-cloak的文档，确保必须在html文件的head部分加载angular.js脚本以获得更好的结果，

Answer 2

使用class =＆＃34; ng-cloak＆＃34;而不是使用AngularJS指令ngCloak，Angular会在加载所有模块的依赖项后自动删除它。

您必须将此行添加到CSS文件中：

<body class="ng-cloak">

将班级添加到您的身体标签：

public class NowThatsAnAttribute : Attribute
{
    public string HeresMyString { get; set; }
}

这是一个有效的傻瓜：http://plnkr.co/edit/v3DnDb2dJIqMAvxkEsO2?p=preview

Answer 3

这很可能是因为您的脚本是从远程服务器而不是从测试服务器的本地文件系统调用的（我想这是因为您声明它挂起的面，而只渲染2个变量渲染时不会造成任何实际的延迟 - 肉眼看来，所以当得到这种情况时，你的浏览器在下载，解析和执行库之前不知道如何处理Angular代码。

我会将AngularJS的副本以及nG可能正在使用的任何其他依赖项下载到项目公共脚本目录中，然后重新测试。我愿意这样做可以解决您的延迟问题。唯一可能的另一个显而易见的事情是此视图具有的数据绑定表达式的数量 - 尽管如果上面的代码是您在此页面上唯一的角度，那么您可以将绑定量作为一个问题进行规则。我认为在大约10,000个数据绑定之前不会遇到真正的延迟问题（基本上AngularJS已知很多东西 - 渲染速度不是其中之一）。

此外，您可以使用ng-bind代替{{ ngExpressions }}来避免“表情闪烁”。

您也可以使用<div ng-show="heading && message"> {{ heading }} {{ message }}</div>

或ngCloak。这个技巧包含在这个帖子中：In Angular, is there a way to prevent flicker in expressions that contain concatenated values?

表达式的值不会在浏览器上呈现

3 个答案: