Question

我在现有网站上使用angularJs来实现非常简单的功能。

就是这样的

<div ng-app>
    <div ng-controller="TermsController">
        <input type="checkbox" ng-model="terms.agree" />
        <input type="submit" value="{{terms.label}}" .. />
    </div>
</div>

我在页面中间插入角度，一切都运行正常，除了角度加载非常慢，用户可以在角度评估其值之前看到{{terms.label}}片刻。

我尝试做类似

的事情

<input type="submit" value="Default value" ng-model="terms.label" .. />

但它从未更新过提交按钮的值。无论如何，我打赌我看过这样的东西，但是输入字段可能没有值属性而且只有模型。

有关如何在angularJs加载之前设置模板的任何指导。

我知道我可以设置一些预加载器并在角度加载后替换它，但是对于这个简单的任务，它似乎是一种过度杀伤。

感谢您的帮助

Answer 1

您可以在加载期间使用ng-cloak属性隐藏元素：

<div ng-app>
    <div ng-controller="TermsController" ng-cloak>
        <input type="checkbox" ng-model="terms.agree" />
        <input type="submit" value="{{terms.label}}" .. />
    </div>
</div>

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

Answer 2

使用现有版本的AngularJS可以做的最好的事情是ng-bind指令。从其文档：

一旦使用ngBind优先于{{ 表达式}}绑定是指将绑定放入的时候浏览器在其原始状态下暂时显示的模板在Angular编译之前。由于ngBind是一个元素属性，它在页面加载时使绑定对用户不可见。

要使ng-bind适用于您的情况，您必须将input代码更改为button代码，如下所示：

<div ng-controller="TermsController">
    <input type="checkbox" ng-model="terms.agree">
    <button type="submit" ng-bind="terms.label">Before</button>
</div>

这是一个有效的jsFiddle：http://jsfiddle.net/TL33r/2/

您可以使用ng-cloak（有关详情，请参阅another question），但ng-cloak会隐藏整个DOM元素（及其子元素），而我相信您已要求拥有当AngularJS启动时，“default”值会更改为绑定。

angularjs设置在评估之前显示的默认值

2 个答案: