Question

我只是习惯于以“有棱有角”的方式做事，所以请原谅我是否违反了一些主要规则或最佳做法。

我正在尝试生成一个指令，在右侧有一个带有图标的输入字段以清除其内容。

我想用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();
      });
  }
};

}）;

这根本没有预料到的效果。我想出的就是用一个具有“可清除输入”属性的输入进行包装。然后我可以使用“replace：true”和“transclude：true”，我可以使用html中的输入字段。

有没有人创建一个在自身之前和之后添加代码的指令？

感谢您的帮助。

安德烈亚斯

Answer 1

您没有正确使用ng-tranclude。我试图在这个小提琴中模仿你的场景。有一个look

基本上你需要创建一个模板，并在那里添加ng-transclude。不在链接功能中。

在自我之前和之后插入代码的指令

1 个答案: