angularjs设置默认值来评估之前显示 [英] angularjs setting default values to display before evaluation

问题描述

我用现有的网站非常简单的功能angularJs。

I used angularJs for really simple functionality on an existing site.

它是这样的。

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

我插在页面中间的角度和不同的事实，即角负荷相当缓慢，用户可以看到{{terms.label}}片刻角度评估其价值之前，一切工作正常。

I plug angular in the middle of the page and everything is working fine except the fact that angular loads quite slow and user can see {{terms.label}} for a moment before angular evaluates its value.

我试图做这样的事情。

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

但它从来没有更新了提交按钮的值。反正我敢打赌我见过这样的事情，但也许输入字段是没有价值属性和唯一模式。

but it never updated the value of the submit button. anyway I would bet I've seen something like this, but maybe input field was without value attribute and only model.

任何指导，如何设置模板angularJs前负荷AP preciated。

any guidance as to how to setup the template before angularJs loads are appreciated.

我知道我可以设置一些preloader更换一次角加载，但对于这个简单的任务似乎是矫枉过正。

I know that I can set some preloader and replace it once angular has loaded, but for this simple task it seems to be an overkill.

感谢您的帮助。

推荐答案

你可以用AngularJS的现有版本做的最好的就是我们的 NG-绑定指令。从它的文档：

The best what you can do with the existing version of AngularJS is to us the ng-bind directive. From its documentation:

在场景中使用ngBind是prefered超过{{
  前pression}}绑定是当它需要投入的绑定
  即暂时由浏览器在其原始状态下显示模板
  前角编译它。由于ngBind是一个元素属性，它
  使得当页面加载绑定用户看不到的。

Once scenario in which the use of ngBind is prefered over {{ expression }} binding is when it's desirable to put bindings into template that is momentarily displayed by the browser in its raw state before Angular compiles it. Since ngBind is an element attribute, it makes the bindings invisible to the user while the page is loading.

为了让你的情况 NG-绑定工作，你将不得不标记修改输入到按钮标签，像这样：

To make the ng-bind work in your case you would have to change the input tag to a button tag like so:

<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/

Here is a working jsFiddle: http://jsfiddle.net/TL33r/2/

您可以使用 NG-斗篷（见另一个问题获取更多信息），但 NG-斗篷将隐藏整个DOM元素（及其子女），而我相信，你已经要求具有得到改变默认值到绑定时在AngularJS踢。

You could use ng-cloak (see another question for more info) but ng-cloak will hide the whole DOM element (and its children) while I believe that you've asked for having a "default" value that gets changed to a binding when AngularJS kicks in.

这篇关于angularjs设置默认值来评估之前显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！