我需要能够添加例如“contentteditable”元素,基于范围上的布尔变量。
使用示例:
<h1 attrs="{'contenteditable=\"true\"': editMode}">{{content.title}}</h1>
将导致contentteditable =true被添加到元素中,如果$scope。editMode被设置为true。
是否有一些简单的方法来实现这种ng-class属性行为?我正在考虑写一个指令,如果没有的话就分享。
编辑:
我可以看到,我提议的attrs指令和ng-bind-attrs指令之间似乎有一些相似之处,但它在1.0.0中被删除了。为什么是Rc3 ?
编辑:这个答案与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;
编辑:这个答案与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;