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

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优先于{{expression}}绑定的情况,就需要将绑定放入模板中,该模板在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(请参阅另一个问题获取更多信息),但ng-cloak会隐藏整个DOM元素(及其子元素),而我相信您已经要求在AngularJS启动时将"默认"值更改为绑定.