Ng-submit called twice with Routeprovider

Question

I use the same form to create and update users in database. I can update properly, but when I create one user, submit send twice and create two same users in database.

I have this in RouteProvider .

 .config(function($routeProvider) {
        $routeProvider
            .when("/users", {
                controller: "MainControlador",
                templateUrl: "templates/users.html"
            })
            .when("/user/:id", {
                controller: "UserControlador",
                templateUrl: "templates/user.html"
            })
            .when("/users/edit/:id", {
                controller: "UserControlador",
                templateUrl: "templates/form.html"
            })
            .when("/users/new", {
                controller: "NewUserControlador",
                templateUrl: "templates/form.html"
            })
            .when("/", {
                templateUrl: "templates/main.html"
            })
            .otherwise("/");
    })

This is my form

<div>
      <form ng-submit="saveUser()">
        <input ng-model="user.name" type="text" required>
        <input ng-model="user.surname" type="text" required>
        <input ng-model="user.phone" type="text"required>
        <input ng-model="user.email"type="text" required>
        <input type="submit">
      </form>
 </div>

And finally i use this controller

//Controller Update
.controller("UserControlador", function($scope, $routeParams, UserAPI) {
        $scope.title = "Edit user";

        UserAPI.getOne($routeParams.id).success(function(data) {
            //Get Array First Element
            $scope.user = data[0];
        })

        $scope.saveUser = function() {
            var data = ({
                id: $routeParams.id,
                name: $scope.user.name,
                surname: $scope.user.surname,
                phone: $scope.user.phone,
                email: $scope.user.email
            });
            UserAPI.update(data).success(function(data) {
                $scope.user = data;
            })
        }

    })
    //Controller Create
    .controller("NewUserControlador", function($scope, UserAPI) {
        $scope.title = "Add user";
        $scope.saveUser = function() {
            var data = ({
                name: $scope.user.name,
                surname: $scope.user.surname,
                phone: $scope.user.phone,
                email: $scope.user.email,
            });
            UserAPI.create(data).success(function(data) {
                console.log(data);
                $scope.user = data;
            })
        }
    })

¿Any idea what happen here? I tried to use console.log but apparently all works fine. I tried to use too Angular batarang to debug angular calls but don´t work.

Answer 1

A very stupid error. In my PHP code I have this...

<?php
$conexion = new PDO("mysql:host=localhost;dbname=httpcrud;charset=utf8", "root", "");
$userName = $_GET['userName'];
$userSurname = $_GET['userSurname'];
$userPhone = $_GET['userPhone'];
$userEmail = $_GET['userEmail'];
$sql=$conexion->query("INSERT INTO users (name,surname,phone,email) VALUES('$userName','$userSurname','$userPhone','$userEmail')");
$json = json_encode($sql->execute());
echo $json;
?>

The submit repeat insert when I use $sql->execute() and query() . I delete $json= json_encode($sql->execute()); to $json = json_encode($sql) and finally all works perfectly.

Answer 2

You have declared two controllers, one for saving the user ( NewUserControlador ) and one for updating (UserControlador) . Both methods are called saveUser() and they are declared on the $scope.

There might be a conflict because of the same name. Why don't you use one Controller for those operations? They are all CRUD operations for the same Entity (User) after all.

If you still want to use two different controllers, you could use some logging to find out what is happening or a greater idea would be to rename the update method in the UserControlador.

More information about scopes can be found here