Question

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

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，这将禁用关闭按钮。

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

1 个答案: