我需要能够添加例如“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-attr-example = "{{参数。Type == 'test' ?'itWasTest': undefined}}"
使用示例:
< div ng-attr-class = "{{参数。Type == 'test' ?'itWasTest': undefined}}">
是否根据params.type的值输出<div class="itWasTest">或<div>
其他回答
我通过努力设置属性来让它工作。以及使用属性的布尔值控制属性的适用性。
下面是代码片段:
<div contenteditable="{{ condition ? 'true' : 'false'}}"></div>
<h1 ng- atr -contenteditable="{{isTrue || undefined}}">{{content.title}}</h1> . > . {{content.title}
当isTrue=true时产生: < h1 contenteditable = " true " > {{content.title}} < / h1 >
当isTrue=false时: <标题> {{content.title}} < / h1 >
当ng-class不能使用时，我使用以下命令有条件地设置类attr(例如在样式化SVG时):
ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"
同样的方法也适用于其他属性类型。
(我认为你需要使用最新的不稳定Angular才能使用ng-attr-，我目前使用的是1.1.4)
编辑:这个答案与Angular2+有关!对不起，我漏了标签!
最初的回答:
对于非常简单的情况，如果设置了某个Input值，则只希望应用(或设置)某个属性，这很简单
<my-element [conditionalAttr]="optionalValue || false">
这就相当于:
<my-element [conditionalAttr]="optionalValue ? optionalValue : false">
(所以optionalValue被应用，否则表达式为false，属性没有被应用。)
示例:我有这样的情况，我让应用颜色和任意样式，其中color属性不能工作，因为它已经设置了(即使没有给出@Input()颜色):
@Component({
selector: "rb-icon",
styleUrls: ["icon.component.scss"],
template: "<span class="ic-{{icon}}" [style.color]="color==color" [ngStyle]="styleObj" ></span>",
})
export class IconComponent {
@Input() icon: string;
@Input() color: string;
@Input() styles: string;
private styleObj: object;
...
}
那么,”风格。只有当Color属性存在时，Color”才被设置，否则可以使用“styles”字符串中的Color属性。
当然，这也可以通过
[style.color]="color"
and
@Input color: (string | boolean) = false;
在Angular的最新版本(1.1.5)中，他们加入了一个名为ngIf的条件指令。它与ngShow和ngHide的不同之处在于，元素不是隐藏的，而是完全不包含在DOM中。它们对于创建成本高但不使用的组件非常有用:
<h1 ng-if="editMode" contenteditable=true>{{content.title}}</h1>
