在ionic iPhone应用中，Ng-submit和ng-click会触发多次

Question

我正在尝试离子框架，它看起来真的很好。但是，我有一个表单提交的问题:表单触发两次。首先是按下提交按钮，然后是点击屏幕上的任何地方。这在xcode模拟器和我的iphone 4gs上都会发生。

这是我所做的:我使用:ionic start myApp sidemenu.

然后将这个表单粘贴到制表符-破折号模板中:

  <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>   

在我的控制器中我有:

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

这是我对起始模板所做的唯一更改，但表单仍然提交两次。我也不知道为什么。非常感谢这里的一些指导!

Answer 1

从按钮中删除type="submit"，并从表单中删除ng-submit，并将其作为ng-click移动到按钮本身。

所以最后应该是

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

Answer 2

这可能是因为每当调用ng-click时，都会有两个调用，一个是angular调用，另一个是ionic调用。当你在使用ionic project时，ionic和angular会捆绑在一起。

你可以试试这个方法。

1)在你的index.html

中将ionic和angular javascript分开

而不是在一个javascript文件中包含(ionic和angular)

ionic.bundle.min.js

使用

ionic.min.js

angular.min.js

2)或者你可以创建一个你自己的指令，而不是像下面这样的ng-click。

包括angular-touch.js并在app.js中把ngTouch作为一个模块注入到你的应用中

应用程序。指令('myclick'， function() {

return function(scope, element, attrs) {
    element.bind('touchstart click', function(event) {
        event.preventDefault();
        event.stopPropagation();
        scope.$apply(attrs['myclick']);
    });
};

});

Answer 3

在你的控制器

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

add $scope.task= {}; to init