angularjs - vue - directives翻译




在AngularJS中有条件地应用属性的最好方法是什么? (7)

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

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

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

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

使用示例:

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

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

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


你也可以使用这样的表达式:

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

在最新版本的Angular(1.1.5)中,它们包含一个名为ngIf的条件指令。 它与ngShowngHide不同之处在于元素不隐藏,但根本不包含在DOM中。 对于创造成本昂贵但未被使用的组件非常有用:

<h1 ng-if="editMode" contenteditable=true>{{content.title}}</h1>

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

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

只有在discountType类型定义为%才会将属性max应用于100


我在使用ng-class不能使用的时候(例如当样式化SVG时)使用以下条件来设置类attr:

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

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

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


我实际上在几个月前写了一个补丁来做这件事(之后有人在freenode上的#angularjs中询问过它)。

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

无论它是否被合并,现有的ng-attr- *可能都适合你的需求(正如其他人所提到的),尽管它可能比你建议的更多的ngClass风格的功能有点笨拙。


要获得一个属性来显示基于布尔检查的特定值,或者如果布尔检查失败,可以省略完整值,我使用了以下内容:

ng-attr-example="{{params.type == 'test' ? 'itWasTest' : undefined }}"

用法示例:

<div ng-attr-class="{{params.type == 'test' ? 'itWasTest' : undefined }}">

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







angularjs-directive