1

我正在尝试 angular.dart 并看到它很慢。当加载包含 angular 的 am html 页面时，首先看到 angular 指令，然后对其进行适当的转换。它不应该立即转换并且用户不应该看到我们是否正在使用 angular 吗？

<!DOCTYPE html>
<html ng-app>
<head>
    <title>Hello, World!</title>
</head>
<body>

  <h3>Hello {{name}}!</h3>
  name: <input type="text" ng-model="name">

  <script type="application/dart" src="main.dart"></script>
  <script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>
4

2 回答 2

3

用具有 class="ng-cloak" 的标签包围 {{name}}。我使用了跨度标签。通过指定 css 规则 .ng-cloak{ display:none; 使其隐藏 }。加载 angular 后，它将从 span 标签中删除 class="ng-cloak" ，一切都会按预期工作。

<!DOCTYPE html>
<html ng-app>
<head>
    <title>Hello, World!</title>
    <style>
      .ng-cloak{ display:none;}
    </style>
</head>
<body>
  <h3>Hello <span class="ng-cloak">{{name}}</span>!</h3> 
  name: <input type="text" ng-model="name">  

  <script type="application/dart" src="main.dart"></script>
</body>
</html>
于 2013-12-14T02:40:36.393 回答
0

另一种方法是使用ng-bind此 youtube 视频中演示的方法：AngularJS MTV Meetup: Best Practices (2012/12/11)（大约 12 分钟后）

引用自NgBindDirective 类的 API 文档

通常，您不直接使用 ngBind，而是使用像 {{ expression }} 这样的双卷曲标记，它类似但不那么冗长。

当 Angular 编译模板之前浏览器暂时以原始状态显示模板时，最好使用 ngBind 而不是 {{ expression }}。由于 ngBind 是一个元素属性，它使绑定在页面加载时对用户不可见。

通过这种方式，您可以显示在 Angular 准备就绪时被替换的默认内容，而不是显示空白页面或进度图标。

于 2013-12-21T17:36:49.973 回答