我需要能够添加例如“contentteditable”元素,基于范围上的布尔变量。
使用示例:
<h1 attrs="{'contenteditable=\"true\"': editMode}">{{content.title}}</h1>
将导致contentteditable =true被添加到元素中,如果$scope。editMode被设置为true。
是否有一些简单的方法来实现这种ng-class属性行为?我正在考虑写一个指令,如果没有的话就分享。
编辑:
我可以看到,我提议的attrs指令和ng-bind-attrs指令之间似乎有一些相似之处,但它在1.0.0中被删除了。为什么是Rc3 ?
你可以在属性前加上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);
}
对于已被接受的解决方案,即Ashley Davis发布的解决方案,所描述的方法仍然在DOM中打印属性,而不管它所分配的值是未定义的。
例如,在输入字段设置中同时使用ng-model和value属性:
<input type="text" name="myInput" data-ng-attr-value="{{myValue}}" data-ng-model="myModel" />
不管myValue背后是什么,value属性仍然会被打印到DOM中,从而被解释。然后Ng-model被覆盖。
有点不愉快,但是使用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指令中使用更详细的检查:)