Question

我刚刚开始学习Angular，我的第一个重要问题涉及使用{{ variableName }}等句柄表达式。

当HTML首次加载但在JS执行之前，用户是否应该在整个页面上看到一堆把手表达式，然后在JS执行时对它们进行评估？这不会导致出现故障吗？既然我认为一定不会发生，那么效果是如何实现的呢？

Answer 1

是的，这确实发生了。这就是Ng-Cloak的用途。

参考： https://docs.angularjs.org/api/ng/directive/ngCloak

Answer 2

这取决于模板的加载方式以及页面上使用的指令。如果模板是从URL或缓存加载的，则在输出到页面之前，它将通过模板引擎进行处理。在使用路由和ngView的完整SPA中，过程如下：

javascript加载，包括angular
angular查看路由并决定加载哪个模板和控制器
模板从缓存或网址加载，控制器初始化
处理模板
模板的输出位于视图中

同样，如果使用ngCloak，那么CSS会隐藏内容，直到Angular＆＃34;做它的事情＆＃34;。 https://docs.angularjs.org/api/ng/directive/ngCloak

如果视图在页面上是内联的（即Angular上的第一个简单示例），并且不使用ngCloak或其他方法来最初使用CSS隐藏内容，那么在Angular处理页面之前，手柄确实会出现。

Answer 3

据我所知，车把确实会短暂出现，但它们会迅速消失，不会引人注意。

Answer 4

我不熟悉Angular，但我认为把手模板的工作方式与Backbone相同：它们包含在<script>标签中，因此最初不会显示脚本标签之间的任何内容，包括所有把手的表情。

这些模板当然会被编译为javascript函数，其输入参数是一个上下文（包含所有变量的javascript对象），其输出是呈现的HTML，除了它首次出现在这些脚本中之外的某个地方标签

Answer 5

在执行js之前未显示此类大括号的最佳做法，您可以使用 ng-bind 或 ng-cloak

<script>
  angular.module('eg', [])
    .controller('egCtrl', ['$scope', function($scope) {
      $scope.name = 'Aerovistae';
    }]);
</script>

<div ng-app="eg" ng-controller="egCtrl">
  Enter name: <input type="text" ng-model="name"><br>
  Hello <span ng-bind="name"></span>!
  Hi <span ng-cloak>{{name}}</span>!
</div>

为什么用户在首次加载页面时看不到Angular中的{{handlebars expressions}}？

5 个答案: