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

使用示例:

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

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

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


当前回答

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

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

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

其他回答

编辑:这个答案与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;

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

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

使用示例:

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

是否根据params.type的值输出<div class="itWasTest">或<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 >

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

下面是代码片段:

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

你可以在属性前加上ng-attr来计算Angular表达式。当表达式的结果为undefined时,将从属性中删除该值。

<a ng-attr-href="{{value || undefined}}">Hello World</a>

将产生(当值为假时)

<a ng-attr-href="{{value || undefined}}" href>Hello World</a>

所以不要使用false,因为那会产生“false”作为值。

<a ng-attr-href="{{value || false}}" href="false">Hello World</a>

当在指令中使用这个技巧时。如果缺少一个值,指令的属性将为false。

例如,上面的选项是错误的。

function post($scope, $el, $attr) {
      var url = $attr['href'] || false;
      alert(url === false);
}