如何将指令中的元素设置为禁用？

Question

我有一个简单的指令，有一个6-7行长的模板。这里有一个类似于我的指令的例子，但我只是在这里使用了一个简单的一行模板和一个<input>来减少问题中的行数。

app.directive('abc', function ($timeout) {
    return {
        require: '^ngModel',
        restrict: 'E',
        template: '<input name="lname" disabled>',
        scope: {
            ngModel: '='
        },
        link: function (scope: any, element, attrs, ngModelCtrl) {           
        }
    };
}); 

这个特别的例子只是一个例子，但我希望有人能用它给我一些建议。

我需要做的是能够在html中设置此输入的禁用者，如下所示：

 <abc disabled="{{isDisabled}}">

有人能给我一些建议吗我可以这么做。注意，在本例中，我硬编码了禁用一词，但我希望在我的应用程序中在运行时设置它。

谢谢

Answer 1

您应该能够使用ngDisabled，因此模板可以使用一个名为ngDisabled的作用域变量。

template: '<input name="lname" ng-disabled="ngDisabled">',

我之所以选择范围变量为ngDisabled，是因为您可以在指令定义中使用以下内容

scope: {
  ngModel: '=',
  ngDisabled: '='
},

然后使用<abc>元素可以使属性ng-disabled

 <abc ng-disabled="isDisabled" ng-model="myModel">

注意，我使用的是ng-disabled而不是disabled，目的是明确它是像通常的ng-disabled属性一样使用的，并且永远不与disabled属性冲突。