我有一个指令:
angular
.module('test')
.directive('multiButton', function () {
return {
restrict: 'E',
replace: true,
scope: {
disabled: '@'
},
template: '<div class="multi-button"><button ng-disabled={{disabled}}></button></div>'
});
已禁用的范围属性是可选的,但我不想让&#34; ng-disabled&#34;如果没有提交禁用属性,则在呈现时在我的模板中填充。
这可能吗?如果是这样的话?
答案 0 :(得分:1)
您可以检查链接上是否存在该属性,如果是,则添加相关的(ngDisabled
)属性:
angular.module('myApp',[])
.directive('multiButton', function () {
return {
restrict: 'E',
replace: true,
scope: {
disabled: '@?'
},
template: '<div class="multi-button"><button></button></div>',
link: function(scope, element, attr){
if(attr.disabled){
element.find('button').attr('ng-disabled', attr.disabled);
}
}
}
});
演示小提琴:http://jsfiddle.net/guv11rxq/
现在,正如预期的那样,<multi-button disabled="hello"></multi-button>
将导致:
<div class="multi-button"><button ng-disabled="hello"></button></div>
但如果没有可选属性<multi-button></multi-button>
,则会产生:
<div class="multi-button"><button></button></div>
答案 1 :(得分:1)
您可以在模板中使用ng-if
来执行此操作:
template: '<div class="multi-button" ng-if="disabled != ''"><button ng-disabled={{disabled}}></button></div><div class="multi-button" ng-if="disabled === ''"><button></button></div>'