在AngularJS中有条件地应用属性的最佳方法是什么？

Question

我需要能够根据范围内的布尔变量向元素添加"contenteditable".

使用示例:

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

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

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

Answer 1

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

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

相同的方法应该适用于其他属性类型.

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

Answer 2

您可以在属性前添加ng-attreval一个Angular表达式.当表达式的结果未定义时,将从属性中删除该值.

<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);
}

Answer 3

我通过硬设置属性来完成这项工作.并使用属性的布尔值控制属性适用性.

这是代码片段:

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

我希望这有帮助.

Answer 4

在最新版本的Angular(1.1.5)中,它们包含了一个名为的条件指令ngIf.它不同于ngShow与ngHide在的元素是不能隐藏,但在DOM完全不包含.它们对于创建成本高但不使用的组件非常有用:

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

Answer 5

要获取一个属性以基于布尔检查显示特定值,或者如果布尔检查失败则完全省略,我使用以下内容:

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

用法示例:

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

会输出<div class="itWasTest">还是<div>基于价值params.type

Answer 6

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

将在isTrue = true时生成: <h1 contenteditable="true">{{content.title}}</h1>

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

Answer 7

关于已接受的解决方案,Ashley Davis发布的解决方案,所描述的方法仍然在DOM中打印属性,而不管其分配的值是否未定义.

例如,在具有ng-model和value属性的输入字段设置中:

<input type="text" name="myInput" data-ng-attr-value="{{myValue}}" data-ng-model="myModel" />

无论myValue背后是什么,value属性仍然会在DOM中打印出来,因此会被解释.然后,Ng模型被覆盖.

有点不愉快,但使用ng-if可以解决问题:

<input type="text" name="myInput" data-ng-if="value" data-ng-attr-value="{{myValue}}" data-ng-model="myModel" />
<input type="text" name="myInput" data-ng-if="!value" data-ng-model="myModel" />

我建议在ng-if指令中使用更详细的检查:)

Answer 8

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

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

Answer 9

几个月前我(实际上是有人在freenode上的#angularjs中询问了这个问题)后,我写了一个补丁.

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

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