javascript - 指令内带有事件的动态 HTML 元素

Question

我正在开发一个使用 Ionic、AngularJs 和 PhoneGap 的项目。我想构建一个指令，添加一个按钮/图标来清理输入的文本。

我知道有很多指令可以做同样的事情，但我更喜欢从头开始创建它。另外，我没有找到真正完全满足我需求的。

我创建指令本身来附加图标没有任何问题，但我无法绑定(bind)单击事件。似乎该事件被完全忽略了。

这是指令。

(function() {
  "use strict";
  var app = angular.module("myApp");

  app.directive("clearInput", function($compile) {
    return {
      require: 'ngModel',

      link: function(scope, element, attrs) {

        if (element.next().length) {
          element.next().insertBefore(element);
        }

        var tpl = '<i class="icon ion-close-circled placeholder-icon clear-element" ng-show="' + attrs["ngModel"] + '.length>0" ></i>';
        var clear = angular.element(tpl);

        clear.bind('click', function(evt) {
          //This never gets called :(
          alert("You clicked me! Good for you.");
        });

        $compile(clear)(scope);

        element.after(clear);

      }
    }
  })
})();

我还创建了一个 plunker 来测试它。 http://plnkr.co/edit/KVqjpD?p=info

非常感谢任何帮助!

请注意，我需要将 click 事件绑定(bind)到运行时创建的元素，而不是绑定(bind)到 DOM 上已存在的元素。

Answer 1

这似乎与 "ionic deals with setting focus to inputs." 的方式有关

解决此问题的一种方法是将图标包装在另一个元素中:

var tpl = '<span><i class="icon ...></i></span>',

对于它的值(value)，你可以做这个 more declarative并避免 $compile:

app.directive("clearInput", function() {
  return {
    scope: {
      value: '=',
      label: '@'
    },
    restrict: 'E',
    templateUrl: 'clearinput.html',
    link: function(scope, element, attrs) {
      scope.clear = function() {
        alert('You clicked me! Good for you.');
      }
    }
  }
})

clearinput.html:

<label class="item item-input"> 
  <span class="input-label">{{label}}</span> 
  <input type="text" ng-model="value" id="usrtxt">
  <a ng-click="clear()" ng-show="value.length > 0">
    <span class="icon ion-close-circled placeholder-icon"></span>
  </a>
</label>

用法:

<clear-input label="Name" value="name"></clear-input>

这是一个工作演示:http://plnkr.co/edit/13fyLiItfruTSTeVUM3A?p=preview