标签: ng-bind

目前,我正在学习AngularJS和我难以理解的区别ng-bind和ng-model.

任何人都可以告诉我他们的差异,以及何时应该使用另一个？

我在其中一个有角度的演示文稿中,提到的会议中的一个人ng-bind比{{}}绑定更好.

其中一个原因是,ng-bind将变量放在监视列表中,并且只有在模型更改时才{{}}会将数据推送到视图,另一方面,每次都会插入表达式(我猜这是角度循环)并推动值,即使值发生变化.

另外据说,如果您在屏幕上没有太多数据可以使用{{}},并且性能问题将不可见.有人可以为我解释这个问题吗？

所以我想在ng-bind指令中通过过滤器放置一个变量

ng-bind="input | filter"

但我想插入更多文字

ng-bind="input | filter + 'more' "

但这不起作用.有没有办法在ng-bind中添加更多文本,就像你只是使用时一样{{}}:

{{input | filter}} more

在Angular.js 1.3中,我可以使用以下命令进行一次绑定:

{{::name}}

但是我怎么能用它ng-bind呢？

ng-bind与{{语法相比,性能有所提高.

是否支持？

这是小提琴:http: //jsfiddle.net/D5h7H/7/

它呈现以下内容:

<div ng-repeat="group in Model.Groups">
    <span>{{group.Name}}</span>
    <div ng-repeat="filter in group.Filters">
        <input type="checkbox" ng-model="filter.enabled">{{filter.Name}}
        <select ng-disabled="!filter.enabled">
            <option ng-repeat="value in filter.Values">{{value}}</option>
        </select>
    </div>
</div>

它是从服务器加载到json中然后呈现给用户的过滤器列表(在一个例子中,json就是在Fiddle中生成的).目前有6组30个过滤器,每个过滤器有15个选项元素.

在Firefox中,现在需要大约2秒来重绘UI.

对于角度js,这个时间还可以吗？有没有什么我做错了导致2秒.渲染(因为2000元素对我来说看起来不是一个大数字,但2秒.肯定是大的)？

我是新手Angular JS.

你们中的任何一个可以解释我的区别ngBind,ngBindHtm与ngBindTemplate在Angular JS用的例子吗？

我有一个用例,我们可以在字符串中包含'&'和'>'字符.例如.强生公司value > 3.因此,虽然来自服务器的响应被编码,但是该值变为'值> 3' .

ng-bind 不支持以下内容:

value > 3将呈现ngBind,而浏览器呈现相同的内容value > 3.

http://jsfiddle.net/HKahG/2/

Ng:bind <div ng-bind="model"></div> 
Ng:bind-html <div ng-bind-html="model"></div>
<div> From Div: value &gt; </div>

为什么此默认浏览器行为不存在ng-bind？我不想使用ng-bind-html(有价值问题,<它不是一个HTML)或ng-bind-unsafe-html.

我的应用程序具有动态键值字段,将显示在应用程序的不同部分.因此,使用单独的指令或装饰器显示所有字符串字段而不是使用它将需要额外的开销ngBind.

问题:

1)有没有其他方法可以在不使用附加指令的情况下执行相同操作,或者这是处理编码数据的正确方法吗？

2)我可以覆盖ng-bind默认的行为或装饰它吗？

我想将一个默认值设置为范围,由ng-bind选取.我这样做:

<button>Show <span data-ng-bind="data.text" data-ng-init="data.text = 'All';"></span> Names</button>

在此示例中,当页面加载时,span设置为innerHTML ='All'.

但是,我希望有一种方法可以做到这一点,而不需要使用ng-init,可能是这样的:

<button>Show <span data-ng-bind="data.text = 'All';"></span> Names</button>

我可以使用ng-bind绑定多个值,如下所示:

<p ng-bind="instructor.first_name instructor.last_name"></p>

每当我尝试这个时,我都会收到以下错误:

错误:$ parse:syntax语法错误

我知道我可以使用花括号做同样的事情

<p>{{instructor.first_name}}{{instructor.last_name}}</p>

但我想避免这种情况,如果我可以,因为其余的代码库使用ng-bind,我会保持一致.谢谢.

我试图在范围变量中存储HTML,然后在模板视图中使用它.当我正在阅读如何以棱角分明的方式做这件事时,我遇到了ng-bind-html.在那里我注意到,当我用,等等绑定html标签时<a>,<strong>它的工作原理.但我无法为其添加<input>标签.

这意味着,这有效:

$scope.myHtml = '<strong>This is <a hreaf="#">Something</a></strong>';

模板:

<p ng-bind-html="myHtml"> </p>

但这不起作用:

$scope.myHtml = '<input type="text" />';

模板:

<p ng-bind-html="myHtml"> </p>

以上仅是用于演示目的的简化示例.我的问题是:

1)标签不适用于ng-bind-html指令吗？

2)如果没有,我如何html绑定输入标签,以便我可以将其插入视图？