CODEWITHSUNDEEP
iphoneangularjsionic-framework
user3345564
user3345564

Reputation: 139

Ng-submit and ng-click fires many times i ionic iPhone app

I'm trying out the ionic framework and it looks really nice. However, I have a problem with form submission: the form fires twice. First when the submit button is pressed, and then if I just tap anywhere on the screen. This happens both in the xcode simulator and on my iphone 4gs.

This is what I have done: I install the sidemenu template with: ionic start myApp sidemenu.

I then simply paste this form in to the tab-dash template:

  <form ng-submit="createTask(task)">
        <div class="list">
            <label class="item item-input">
                <input type="text" placeholder="What do you need to do?" ng-model="task.title">
            </label>
        </div>
        <div class="padding">
            <button type="submit" class="button button-block button-positive">Create Task</button>

        </div>
    </form>

And in my controller I simply have: 

 $scope.createTask = function(task) {

        alert(task.title);

    };

This is the only change I made to the starter template, and still the form submits twice. I have no idea why. Would really appreciate some guidance here!

Upvotes: 2

Views: 5798

Answers (3)

Akshay Kalekar
Akshay Kalekar

Reputation: 1

This is possibly because whenever the ng-click is called there are two calls made ,one by angular and other by ionic .As ionic and angular comes as a bundle when you are working with ionic project.

You could try one of this method.

1) have ionic and angular javascript seperated in your index.html

instead of including (ionic and angular in one javascript file)

ionic.bundle.min.js

use as

ionic.min.js

angular.min.js

2) Alternatively you can create a directive of your own instead of ng-click like below.

before that Include angular-touch.js and inject ngTouch as a module in your app in app.js

app.directive('myclick', function() {

return function(scope, element, attrs) {

    element.bind('touchstart click', function(event) {

        event.preventDefault();
        event.stopPropagation();

        scope.$apply(attrs['myclick']);
    });
};

});

Hope this helps.

Upvotes: 0

Josias Aka
Josias Aka

Reputation: 1

in your controller 

$scope.createTask = function(task) {
    alert(task.title);
};

add $scope.task= {}; to init

Upvotes: -1

GravyPlaya
GravyPlaya

Reputation: 128

Remove the type="submit" from the button and remove the ng-submit from the form and move it as a ng-click on the button itself.

So you should end up with 

<button ng-click(createTask) class="...">Create Task</button>

Upvotes: 3

Related Questions