如何在Angularjs中将动态添加元素的属性绑定到其父属性值

Question

我的应用程序的各个页面都使用了一个模型（角度材料自动完成元素），这个自动完成没有清除按钮，所以我做了一个指令，当这个自动完成具有相同的值时动态添加一个关闭按钮，并在自动完成没有任何价值。 我的要求是在模型的（自动完成）ng-disabled 被评估为真时禁用此关闭按钮。 我知道有多种方法可以专门使用隔离范围并绑定它们的值，但我不想修改我已经开发的所有页面。

CodePen link

function clearAutocomplete($parse, $compile, $log) {
  var diretive = {    
    restrict: 'A',
    link: linkFunciton
  }
  return diretive;

  function linkFunciton(scope, element, attrs) {
    var ngDisabledModel = $parse(attrs.ngDisabled);
    scope.isDisabled = ngDisabledModel(scope);// value binded to auto complete ng-diabled

    var button = angular.element('<md-button>').attr('ng-disabled', '{{isDisabled}}');

    button.append('<md-icon md-font-set="material-icons">close</md-icon>');
    element.append(button);

    $compile(button)(scope); 

    var searchTextModel = $parse(attrs.mdSearchText);
    scope.$watch(ngDisabledModel, function(isElementDisabled) {
      scope.isDisabled = isElementDisabled;
    });

    button.on('click', function() {
        scope.$apply(function() {
            searchTextModel.assign(scope, undefined);
            element.find('input').focus();
        });
    });
  }
}

此代码的问题在于，即使自动完成功能被禁用，清除按钮仍然处于启用状态。 实现此功能的最佳方法是什么（不添加任何隔离范围）

Answer 1

用这个替换你的按钮：

<md-icon md-font-set="material-icons" ng-disabled="isDisabled">close</md-icon>

每当您的 isDisabled 变量在观察者中翻转为 true 时，这将禁用关闭按钮。