angleディレクティブ：ng関数を使用してDOM要素を追加する

Question

テキストを取り込むだけの小さな入力フィールド用のディレクティブを作成しようとしていますが、テキストが内部にある場合はsearchglassからXに動的に変更し、をクリックします。 したがって、必要なHTMLを入力に追加しますが、ネイティブのngディレクティブを実行するだけです。私は角度と希望にかなり新しいです、誰かが助けることができます。そこにいくつかの同様の質問がありますが、本当に役立つものはありません。

angular.module('myApp') 
    .directive('searchBox', function ($compile) { 
     return { 
      restrict: 'A', 
      scope: { 
       ngModel: '=' 
      } 
      link: function(scope, element, attrs) { 
       var appendix = angular.element(
        '<span class="input-group-addon" ng-click="ngModel = none">' + 
        ' <i ng-hide="ng-model" class="fa fa-search"></i>' + 
        ' <i ng-show="ng-model" class="fa fa-close"></i>' + 
        '</span>'); 
       var wrapper = angular.element(
        '<div class="input-group input-group-sm search-box-custom"></div>' 
       ); 
       element 
        .wrap(wrapper) 
        .after(appendix); 

       element.removeAttr("search-box"); //prevent endless compile loop 
       element.removeAttr("data-search-box"); //prevent endless compile loop*/ 
       $compile(appendix)(scope); 

      } 
     }; 
    }); 

NG-モデルは、入力フィールドに定義されている

<input search-box 
     type="text" 
     ng-model-options="{debounce:1000}" 
     ng-model="inputValue" 
     placeholder="Hier Tippen..." /> 

編集：ディレクティブは親スコープに接続されている独自のスコープを持っている必要がありますが、同じであってはならない親の値が可能性があるため、他の状況が異なる

Answer 1

次のコードを試してください。正しく動作するはずです。

var appendix = angular.element(
    '<span class="input-group-addon" ng-click="inputValue = null">' + 
    ' <i ng-hide="inputValue" class="fa fa-search"></i>' + 
    ' <i ng-show="inputValue" class="fa fa-close"></i>' + 
    '</span>'); 

以上、私はjsFiddleを作成しました。

役立ち情報：

scopeプロパティは、オブジェクトまたはfalsy値真であることができる：

1. falsy：いいえ範囲はディレクティブに作成されません。このディレクティブは親のスコープを使用します。
2. true：プロトタイプ的に親から継承する新しい子スコープが、ディレクティブの要素用に作成されます。同じ要素の複数のディレクティブが新しい​​スコープを要求する場合、新しいスコープは1つだけ作成されます。新しいスコープルールは、テンプレートのルートが常に新しいスコープを取得するため、テンプレートのルートには適用されません。
3. {...}（オブジェクトハッシュ）：ディレクティブの要素に対して新しい "分離"スコープが作成されます。 '隔離'スコープは、元のスコープからプロトタイプ的に継承しない点で通常のスコープと異なります。これは、再使用可能なコンポーネントを作成する場合に便利です。再利用可能なコンポーネントは、誤って親スコープのデータを読み取ったり変更したりしないでください。

デフォルトでは、スコープは作成されません。これはあなたの指示にある場合です。つまり、あなたはカスタム指示から直接inputValueにアクセスできます。

編集1

詳細はjsFiddleを見てください。メインコンセプトは参考になっ機能と一緒にmodelSetterとmodelGetterを使用することです：

let modelGetter = $parse(attrs['ngModel']); 
let modelSetter = modelGetter.assign; 

scope.reset = function() { 
    modelSetter(scope, null); 
}; 

scope.isEmpty = function() { 
    return !modelGetter(scope); 
}; 

var appendix = angular.element(
    '<span class="input-group-addon" ng-click="reset()">' + 
    ' <i ng-show="isEmpty()" class="fa fa-search">Search</i>' + 
    ' <i ng-hide="isEmpty()" class="fa fa-close">Delete</i>' + 
    '</span>');