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

Question

I have created a input clear directive to clear input field, but its not working in ionic, ng-click event is not firing, same code is working fine in angular fiddle.

Here is angular demo

Here is ionic demo

My template in ionic look like this

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

and very simple controller

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

update

directive

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

i don't have it in app.js dep list, maybe its included in ionic bundle, but I have tried using ng-touch instead ng-click, same issue, not firing — Saqueib
– Saqueib, Commented Feb 11, 2016 at 16:17
You'ev got a link to the demo; but your actual directive code should be in the question too. — George Stocker
– George Stocker, Commented Feb 11, 2016 at 16:36

Sha Alibhai · Accepted Answer · 2016-02-11 16:34:06Z

4

The reason it doesn't work in ionic is because you have the input-clear directive on a label which is blocking the click from firing. By changing the label element to a div it starts working again.

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>

Here's a similar problem that was solved in the same way https://forum.ionicframework.com/t/buttons-inside-form-labels/29033

answered Feb 11, 2016 at 16:34

Sha Alibhai

8815 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tummala Krishna Kishore · Accepted Answer · 2016-02-11 17:07:46Z

0

For the form tag you need to add

novalidate=""

then the message will be fired . here is a working code pen

edited Feb 11, 2016 at 17:07

answered Feb 11, 2016 at 16:28

Tummala Krishna Kishore

8,2814 gold badges36 silver badges52 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related