Question

我尝试了离子框架，它看起来非常好。但是，我在表单提交方面遇到问题：表单触发两次。首先按下提交按钮，然后点击屏幕上的任意位置。这在xcode模拟器和我的iphone 4gs上都会发生。

这就是我所做的：我安装了sidemenu模板：ionic start myApp sidemenu。

然后我只需将此表单粘贴到tab-dash模板中：

  <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，都会进行两次调用，一次是角度调用，另一次是离子调用。当你使用离子项目时，离子和角度就像一束一样。

您可以尝试使用此方法之一。

1）在index.html中分离了离子和角度javascript。

而不是包含（一个javascript文件中的离子和角度）

ionic.bundle.min.js

用作

ionic.min.js

angular.min.js

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

之前包括angular-touch.js并将appTj中的ngTouch作为模块注入app.js

app.directive（＆＃39; myclick＆＃39;，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);
};

将$scope.task= {};添加到init

Ng-submit和ng-click多次触发i ion iPhone应用程序

3 个答案: