Сброс Угловой ввод путем создания нового объекта и переназначения свойств

Question

Почему три пропущенных строки не работают? Несмотря на то, что они сбросят поля ввода до нуля, вывод также полностью пуст. только переназначая объект, он работает правильно. (оставляя мой заводский файл для Users.create для краткости, он выполняет http get)

Кажется, что в обоих случаях «bro» записывается до «эй», я предполагаю, что 3 строки переназначают $ scope. newUser, прежде чем он войдет в User.create, но не будет ли $ scope.newUser = {} делать это?

$scope.addUser = function(){ 
    Users.create($scope.newUser).then(function() { 
     // console.log('hey'); 
     $scope.displayUsers(); 
    }) 

    $scope.newUser = {}; 
    console.log('bro'); 
    // $scope.newUser.name = ''; 
    // $scope.newUser.email = ''; 
    // $scope.newUser.id = '';`` 
    }; 

Соответствующие HTML

<div ng-controller="AppController"> 
    <h1>Testing</h1> 

    <form ng-submit="addUser()"> 
    <input ng-model="newUser.name" placeholder="Your Name"> 
    <input ng-model="newUser.email" placeholder="Email"> 
    <input ng-model="newUser.id" placeholder="Id"> 
    <input type="submit" value="Add User"/> 
    </form> 

    <!-- <button ng-click="addUser()">Add User</button> --> 
    <button ng-click="displayUsers()">View current Users</button>  

    <ul> 
    <li ng-repeat="user in users track by $index" ng-click="removeUser()"> 
     Name: {{ user.name }} <br>Email: {{user.email}} <br> Id: {{user.id}} 
    </li> 
    </ul> 

теперь я понимаю, что вы должны поставить эти 3 линии из-за асинхронной природы JavaScript внутри затем обратного вызова, но почему вы не должны делать то же самое с $ scope.newUser = {}?

Answer 1

Как сказал @Chandermani, это классическая проблема асинхронности, с которой мы все сталкиваемся сначала. Угловые методы в $http и $resource возвращают обещания, которые в будущем будут заполнены или отвергнуты. Кроме того, при рассмотрении обещаний не забывайте всегда обрабатывать ошибки с catch.

$scope.addUser = function() { 
    Users.create($scope.newUser).then(function() { 
    console.log('Second!'); 
    $scope.newUser = {}; 
    }).catch(function (err) { 
    console.log('Something wrong happened!'); 
    }); 

    console.log('First!'); 
};