CODEWITHSUNDEEP
javascriptangularjsionic-framework
Saqueib
Saqueib

Reputation: 3520

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

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

Upvotes: 0

Views: 658

Answers (2)

Tummala Krishna Kishore
Tummala Krishna Kishore

Reputation: 8271

For the form tag you need to add

novalidate=""

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

Upvotes: 0

Sha Alibhai
Sha Alibhai

Reputation: 881

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

Upvotes: 4

Related Questions