指令中的Angular可选属性

时间:2015-07-24 13:59:52

标签: javascript angularjs

我有一个指令:

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;如果没有提交禁用属性,则在呈现时在我的模板中填充。

这可能吗?如果是这样的话?

2 个答案:

答案 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>'