5

我在现有网站上使用 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 后替换它，但对于这个简单的任务来说，这似乎是一种矫枉过正。

感谢帮助

4

2 回答 2

10

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

于 2012-11-08T16:12:45.630 回答
8

对我们来说，使用 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 启动时将“默认”值更改为绑定。

于 2012-11-08T18:12:50.710 回答