動的に追加された要素の属性をAngulrjsの親の属性値にバインドする方法

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にひっくり返されるたびにこれが閉じるボタンを無効にしますウォッチャーで。