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

使用示例:

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

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

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


当前回答

你也可以这样表达:

<h1 ng-attr-contenteditable="{{ editMode ? true : false }}"></h1>

其他回答

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

下面是代码片段:

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

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

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

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

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

<h1 ng- atr -contenteditable="{{isTrue || undefined}}">{{content.title}}</h1> . > . {{content.title}

当isTrue=true时产生: < h1 contenteditable = " true " > {{content.title}} < / h1 >

当isTrue=false时: <标题> {{content.title}} < / h1 >

你也可以这样表达:

<h1 ng-attr-contenteditable="{{ editMode ? true : false }}"></h1>

为了让一个属性根据布尔检查显示特定的值,或者如果布尔检查失败则完全忽略,我使用了以下方法:

ng-attr-example = "{{参数。Type == 'test' ?'itWasTest': undefined}}"

使用示例:

< div ng-attr-class = "{{参数。Type == 'test' ?'itWasTest': undefined}}">

是否根据params.type的值输出<div class="itWasTest">或<div>