Question

我目前正在开发一个小型的angularjs应用程序，它基本上是一个用户配置文件管理应用程序。

我遇到的问题是动态添加用户。当我输入用户数据时，它已成功POST到我已设置的本地服务器，但我必须刷新页面才能在用户列表中查看新用户

我显然不想要刷新。

- 是的，我在运行POST函数后尝试了$ scope.apply（）

我使用Angular Batarang（调试工具）注意到的是，范围正在更新，但新用户应该有一个空白点或'null'值。

以下是控制器：

UsersApp.controller('UserListController', [ '$scope', 'userService',  function($scope, userService) {  


  $scope.usersList = userService.usersList;

  $scope.users = userService.users; 
  $scope.user = userService.user; 

}]);

UsersApp.controller('AddUserController', function($scope, $window,    dataResources, userService) {  

  $scope.addNew = function addNew(newUser) {
  $scope.usersList = userService.usersList;

  var firstName = newUser.firstName;
  var lastName = newUser.lastName;
  var phone = newUser.phone;
  var email = newUser.email;

  $scope.newUserData = {
    firstName , lastName, phone , email
  }

  new dataResources.create($scope.newUserData);
  $scope.usersList.push(dataResources);
  $scope.$apply();

};

以下是我的观点：

添加用户：

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="js/minimize.js"></script>

<div ng-controller="AddUserController">

<div class="userInfo" id="usernameDiv">
    <h2 id="username">User<img id="showhide" src="images/plus.png" style="position:absolute; padding-left:15px; width:31px; color:white;"></h2>
</div>

<div class="userInfo">
    <div id="listInfo">

        <form ng-controller="AddUserController">
                <input type="text" placeholder= "First Name" ng-model="newUser.firstName"></input>
                <input type="text" placeholder= "Last Name" ng-model="newUser.lastName"></input>
                <input type="text" placeholder= "Phone Number" ng-model="newUser.phone"></input>
                <input type="text" placeholder= "Email" ng-model="newUser.email"></input>
                <button type="submit" ng-click="addNew(newUser)">Add   User</button>
        </form>

    </div>
</div>

用户列表：

<!DOCTYPE html>
<html>
<head></head>

<body id="">

<div ng-controller="UserListController">
    <div class="userInfo">

        <h2>List of Users</h2>

        <div id="listInfo">

            <ul style="list-style-type: none;">
                <li ng-repeat="user in usersList">
                <!--<p class="userData">ID: {{ user }}</p> -->
                <p class="userData"><a style="cursor:pointer;" ui-sref="UserProfile">{{ user.firstName }}</a></p>


            </li>
        </ul>

    </div>

</div>

工厂和服务：

UsersApp.factory('dataResources', [ '$resource', function($resource) {

  return $resource('http://localhost:24149/users/:id', {}, {
    query: {method:'GET', params:{idnum: '@id'}, isArray:true},
    create: {method:'POST', headers: { 'Content-Type': 'application/json' }},
    update: {method:'PUT', params:{idnum: '@id'}},
    remove: {method:'DELETE', params:{idnum:'@id'}, isArray:true}
  });

}]);


UsersApp.service('userService', function(dataResources) {

return {
      usersList: dataResources.query()
}

});

Answer 1

我不确定我是否完全遵循，但我相信您需要处理POST中的承诺，然后推送结果。例如，

getInterventionsFromSearch: function(search_query, problem_id) 
{
    var interventions = new MedicalIntervetionsCollection();
    // fetch data on url AJAX
    if(search_query != "")
    {
        interventions.url = "medical_interventions_search?search_query="+encodeURIComponent(search_query) + 
        "&problem_id=" + problem_id;
        interventions.fetch();
    }
    return interventions;
}

您的服务将返回一个承诺，然后当POST完成后，您的服务应该返回新用户，您只需将其添加到当前列表中。

Answer 2

请参阅$resource文档：

非GET“类”操作：Resource.action（[parameters]，postData，[success]，[error]）

根据文档，您的代码应如下所示：

dataResources.create($scope.newUserData,
   function(data) {
       $scope.usersList.push(data);
   }
);

controller：您不需要创建新的userdata对象，只需使用newUser

即可

UsersApp.controller('AddUserController', function($scope, $window,    dataResources, userService) {  

  $scope.usersList = userService.usersList;

  $scope.addNew = function addNew(newUser) {
    dataResources.create($scope.newUser,
      function(data) {
        $scope.usersList.push(data);
      }
    );
  };    
};

Answer 3

使用observables的angular2也是一样。

public posts: any;    
onPost(input) {
        this.dataService.jsonserverPost(input)
        .subscribe(
          (data: any) => {
            this.posts.push(data);        
          }
      );
      }

Angularjs：POST后

3 个答案: