javascript - ng-click 事件在 ionic 中不起作用，但在 Angular 中起作用

Question

我创建了一个输入清除指令来清除input字段，但它在ionic中不起作用，ng-click事件没有触发，相同的代码在 Angular fiddle 。

Here is angular demo

Here is ionic demo

我的 ionic 模板如下所示

<ion-list>
   <label class="item item-input" input-clear >
      <input type="text" 
         ng-model="user.email" 
         placeholder="{{ 'LOGIN.EMAIL_ID' | translate }}">
   </label>
</ion-list>

和非常简单的 Controller

.controller('forgotPasswordCtrl', function($scope) {
    $scope.user = {};
});

更新

指令

.directive('inputClear', function($compile) {
return {
  restrict: 'A',
  link : function (scope, element, attrs) {
    // Find the input and bind keyup
    var input = element.find("input");

    // Input length
    scope.input = { len : 0 };

    scope.clearInput = function () {
        input[0].value = "";
        console.log(input);
    };

    input.bind("keyup", function() {
      scope.input.len = input[0].value.length;
      if(scope.input.len > 1) {
        console.log(scope.input.len);  
      }
      scope.$apply();
    });

    var el = angular.element('<a class="clear-text button-clear" ng-show="input.len > 1" ng-click="clearInput()">X</a>');
    $compile(el)(scope);
    element.append(el);
    }
  };
})

Answer 1

它在 ionic 中不起作用的原因是因为标签上有 input-clear 指令，该指令阻止点击触发。通过将 label 元素更改为 div，它会再次开始工作。

Heres the codepen

<ion-list>
  <div class="item item-input" input-clear>
    <input type="email" required ng-model="user.email" placeholder="Email Id">
  </div>
</ion-list>

这是一个以相同方式解决的类似问题 https://forum.ionicframework.com/t/buttons-inside-form-labels/29033