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

});

这根本无法按预期工作。我想出的只是将具有“可清除输入”属性的输入包装起来。然后我可以使用“replace：true”和“transclude：true”，并且可以使用 html 中的输入字段。

有没有人创建了一个指令，在它之前和之后添加代码？

谢谢你的帮助。

安德烈亚斯

4

1 回答 1

2

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

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

于 2013-07-18T15:05:35.783 回答