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

2018-07-01 14:55:37

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

使用示例：

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

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

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

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

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

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

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

您可以使用ng-attr前缀属性来评估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);
}

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

以下是代码片段：

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

我希望这有帮助。

链接地址: http://www.djcxy.com/p/88171.html