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

ng-click event is not working in ionic, but it works in angular

本文关键字：起作用 Angular 不起作用 事件 ionic ng-click      更新时间：2023-09-26

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

这是角度演示

这是离子演示

我在离子中的模板看起来像这样

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

它在离子中不起作用的原因是因为你在标签上有输入清除指令，该指令阻止点击触发。通过将标签元素更改为div，它再次开始工作。

这是代码笔

<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

对于表单标签，您需要添加

novalidate=""

然后消息将被触发。 这是一个有效的代码笔

相关文章：