Question

我已经创建了一个输入清除指令来清除input字段，但它不能在离子，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);
    }
  };
})

Answer 1

它在离子中不起作用的原因是因为你在标签上有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

Answer 2

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

novalidate=""

然后将触发该消息。这是一个有效的code pen

ng-click事件在离子中不起作用，但它在角度

2 个答案: