13

「クリア」ボタン（ブラウザが<input type="search">要素に追加する「x」ボタンを考えてください）を<input>.

「クリア」ボタンはディレクティブから注入され、絶対的に配置されるため、「クリア」ボタンの適切な配置を保証する必要<input>があるラッパー要素に、既存のボタンと新しく追加された「クリア」ボタンの両方を含めたいと思います。position: relative

宣言された HTML は次のようになります。

<input type="text" id="myField" data-ng-model="someModel" data-search>

私がこれまで持っている指令：

angular.module('myApp', []).directive('search', function() {
  var
    clear = angular.element('<a href role="button" class="btn x" style="display:none">&times;</a>'),
    wrapper = angular.element('<div style="position: relative"></div>');

  return {
    restrict: 'A',
    link: function( scope, element, attrs ) {
      element.wrap(wrapper.append(clear));

      // more code that's not relevant to my question
    }
  };
});

最終的に得られるHTMLは

<div style="position: relative">
  <a href role="button" class="btn x" style="display: none">&times;</a>
  <input type="text" id="myField" data-ng-model="someModel" data-search>
</div>

これは私が求めているものですが、理想的には 2 つの新しい要素をテンプレート化し、link関数から DOM 操作を抽象化したいと考えています。

replace/templateとオプションのいずれかまたは両方を使用してこれを行うには、おそらくより良い方法があるとtransclude思いますが、これらのオプションのいずれかでソース要素を (すべての属性とデータバインディングと共に) 保持して使用する方法がわかりません。

また、私のサンプルng-modelでは source 要素に が定義されていますが、これはオプションと見なす必要があることに注意してください。また、ディレクティブを属性 ( ) に制限したいと思いますrestrict: 'A'。

4

2 に答える 2

3

私の意見では、再利用可能なコンポーネントを設計するためのより良い方法は、スコープとディレクティブ コントローラーを分離することです。あなたの場合、ロジックが表示されないので、スコープを分離するだけで簡単にします。

テンプレート ファイル:

<div style="position: relative">
  <a href role="button" class="btn x" style="display: none">&times;</a>
  <input type="text" id="myField" data-ng-model="model">
</div>

JS:

angular.module('myApp', []).directive('search', function() {

  return {
    restrict: 'E',
    scope:{
      model:"=model"
    },
    link: function( scope, element, attrs ) {

      // more code that's not relevant to my question
    },
    templateUrl:url-to-your-template
  };
});

これを使って：

<search model="someModel"/>

あるいは単に：

<search />

属性として使用する必要がある場合は、次を試してください。

JS:

angular.module('myApp', []).directive('search', function() {

  return {
    restrict: 'A',
    scope:{
      model:"=model"
    },
    replace:true,
    link: function( scope, element, attrs ) {

      // more code that's not relevant to my question
    },
    templateUrl:url-to-your-template
  };
});

これを使って：

<div search model="someModel"/>

あるいは単に：

<div search />
于 2013-10-11T14:43:56.177 に答える