Javascript 指令中的角度可选属性

我有一个指示：

angular
  .module('test')
  .directive('multiButton', function () {
    return {
      restrict: 'E',
      replace: true,
      scope: {
        disabled: '@'
      },
      template: '<div class="multi-button"><button ng-disabled={{disabled}}></button></div>'
    });

angular
.module（“测试”）
.directive（'multiButton'，function（）{
返回{
限制：'E'，
替换：正确，
范围：{
已禁用：“@”
},
模板：“”
});

禁用的scope属性是可选的，但是如果没有提交禁用的属性，我不希望在呈现时在模板中包含“ng disabled”内容

---

这是可能的吗？如果是，如何实现？

您可以检查链接上是否存在该属性，如果存在，请添加相关（

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

angular.module（'myApp'，[]）
.directive（'multiButton'，function（）{
返回{
限制：'E'，
替换：正确，
范围：{
残疾人士：“@？”
},
模板：“”，
链接：功能（范围、元素、属性）{
如果（属性已禁用）{
元素find（'button'）.attr（'ng-disabled'，attr.disabled）；
}
}
}
});

演示小提琴：

现在，正如预期的那样，

将导致：

但如果没有可选属性，

，则会导致：

---

您可以通过在模板中使用

ng来执行此操作：

 template: '<div class="multi-button" ng-if="disabled != ''"><button ng-disabled={{disabled}}></button></div><div class="multi-button" ng-if="disabled === ''"><button></button></div>'

模板：“”
已禁用：“@？”
，“
？
运算符。@Drobins当然可以，但在呈现模板时，它仍将具有“ng已禁用”是吗？这就是我想要阻止的。啊，这是有道理的。那么你可能希望
@
与
编译
函数结合来构建模板字符串。@randomKek你是否要动态设置
禁用
值实际上，编译过于复杂了。Link更有意义。更新了我对的答案简化它。这会增加很多额外的模板代码来维护（任何更改都必须在这两个地方进行，这在编写代码时应该经常避免——以DRY为目标）。此外，这是一个小得多的问题，它将为每个
$digest
周期中的每一个元素添加两个比较。@DRobinson您是正确的。这不是最好的方法，但您可以使用它。是的，我同意原则上这基本上是可行的，尽管不是最佳的。这是一种应该采用的方法由于我在上面的评论中概述的原因而避免。