0

私は「角度のある」方法で物事を行うことに慣れてきたばかりなので、いくつかの主要なルールやベスト プラクティスに違反している場合はご容赦ください。

入力フィールドの右側にアイコンを表示して内容をクリアするディレクティブを生成しようとしています。

HTMLで書きたいと思います：

<input clearable-input ng-model="name">

私は次のようなディレクティブを使用しようとしました:

Directives.directive("clearableInput", function($compile, $parse) {
    return {
      scope: false,
      replace:    false,
      transclude: false,
      restrict:    "A",

      link: function( scope, element, attrs, controller){

        var pre = "<span style='position: relative;'>" +
              "  <span style='padding-right: 16px; width: 100%;' ng-transclude>";

        var post ="  </span>" +
          "  <span class='clickToClear' style=\"position: absolute; display: block; top: -2px; right: 0px; width: 16px; height: 16px; background: url('Images/sprites.png') 0 -690px; cursor: pointer;\" ng-click=''></span>" +
          "</span>";

              element.insertBefore(pre);
              element.insertAfter(post);

              element.find("span.clickToClear").on( "click", function(){
        var parsed = $parse(attrs["clearableInput"]);
        if( parsed.assign ) {
          parsed.assign( scope, "");
        }
        scope.$digest();
      });
  }
};

});

これはまったく期待どおりに機能しません。私が思いついたのは、「clearable-input」属性を持つ入力をラップすることだけです。次に、「replace: true」と「transclude: true」を使用して、html にある入力フィールドを使用できます。

それ自体の前後にコードを追加するディレクティブを作成した人はいますか?

ご協力いただきありがとうございます。

アンドレアス

4

1 に答える 1

2

ng-tranclude正しく使用していません。このフィドルであなたのシナリオをエミュレートしようとしました。見てください

基本的に、テンプレートを作成し、ng-transcludeそこに追加する必要があります。リンク機能にはありません。

于 2013-07-18T15:05:35.783 に答える