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>

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

我试图做类似的事情

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

但它从未更新提交按钮的值。无论如何，我敢打赌我见过这样的东西，但也许输入字段没有值属性，只有模型。

任何关于如何在加载 angularJs 之前设置模板的指导都值得赞赏。

我知道我可以设置一些预加载器并在加载 angular 后替换它，但对于这个简单的任务来说，这似乎有点过头了。

感谢帮助

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 启动时更改为绑定。