我需要能够添加例如“contentteditable”元素,基于范围上的布尔变量。

使用示例:

<h1 attrs="{'contenteditable=\"true\"': editMode}">{{content.title}}</h1>

将导致contentteditable =true被添加到元素中,如果$scope。editMode被设置为true。 是否有一些简单的方法来实现这种ng-class属性行为?我正在考虑写一个指令,如果没有的话就分享。

编辑: 我可以看到,我提议的attrs指令和ng-bind-attrs指令之间似乎有一些相似之处,但它在1.0.0中被删除了。为什么是Rc3 ?


当前回答

当ng-class不能使用时,我使用以下命令有条件地设置类attr(例如在样式化SVG时):

ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"

同样的方法也适用于其他属性类型。

(我认为你需要使用最新的不稳定Angular才能使用ng-attr-,我目前使用的是1.1.4)

其他回答

对于输入字段验证,您可以执行以下操作:

<input ng-model="discount" type="number" ng-attr-max="{{discountType == '%' ? 100 : undefined}}">

只有当折扣类型定义为%时,才会将属性max应用到100

能够让这个工作:

ng-attr-aria-current="{{::item.isSelected==true ? 'page' : undefined}}"

这里的好处是if项。isSelected为false,则该属性不会被渲染。

实际上我在几个月前写了一个补丁(在freenode的#angularjs中有人问过这个问题)。

它可能不会被合并,但它非常类似于ngClass: https://github.com/angular/angular.js/pull/4269

不管它是否被合并,现有的ng-attr-*东西可能适合你的需求(正如其他人提到的),尽管它可能比你建议的更具ngclass风格的功能要笨拙一些。

我通过努力设置属性来让它工作。以及使用属性的布尔值控制属性的适用性。

下面是代码片段:

<div contenteditable="{{ condition ? 'true' : 'false'}}"></div>

如果你需要Angular 2的解决方案,那么它很简单,使用如下所示的属性绑定,例如,你想让输入有条件地只读,然后在方括号中添加属性,后跟=符号和表达式。

<input [readonly]="mode=='VIEW'">