пытается отобразить имя угловое

Question

Я все еще пытаюсь узнать угловой JS, и у меня возникли проблемы с отображением пользователя, который я только что ввел в базу данных для отображения на следующем частичном. Я могу отображать других пользователей, но данные, возвращенные мне сразу после добавления пользователя, просто не выйдут! Я узнал много способов сделать это неправильно, может кто-нибудь покажет мне, как это сделать правильно? вот мой код.

Начальная страница выплеска

<div ng-controller="usersController"> 
<h1>Hello!</h1> 
<h1>Please enter your name to join and share your ideas</h1> 
<form> 
    <input type="text" ng-model="newUser.name"> 
    <button ng-click="addUser()">Enter</button> 
</form> 

угловые маршруты

var myApp = angular.module('myApp', ['ngRoute']); 
myApp.config(function ($routeProvider) { 
    $routeProvider 
    .when('/', { 
     templateUrl: '../partials/main.html' 
    }) 
    .when('/dashboard', { 
     templateUrl: '../partials/dashboard.html' 
    }) 
    .otherwise({ 
     redirectTo: '/' 
    }); 
}); 

страницы Я хочу, чтобы отобразить текущий пользователь и все пользователи добавили

<div ng-controller="usersController"> 
<h1>Welcome</h1> 
<h1 ng-bind="currentUser.name"></h1> 
<ul ng-repeat="user in allUsers"> 
    <li ng-bind="user.name"></li> 
</ul> 

моих пользователей контроллер

myApp.controller('usersController', function ($scope, usersFactory) { 

var getUsers = function() { 
    usersFactory.getUsers(function (data) { 
     $scope.allUsers = data; 
    }) 
} 

$scope.addUser = function() { 
    usersFactory.addUser($scope.newUser, function (data) { 
     $scope.currentUser = {'name': data.name}; 
    }) 
} 

getUsers(); 
}) 

моих пользователей фабричных

myApp.factory('usersFactory', function ($http, $location) { 

var factory = {}; 

factory.getUsers = function (callback) { 
     $http.get('/show_users').success(function (users) { 
      callback(users); 
     }) 
    } 

factory.addUser = function (data, callback) { 
    $http.post('/new_user', data).success(function (user) { 
     callback(user); 
     $location.path('/dashboard'); 
    }) 
}  
return factory; 
}) 

любой помощь очень ценятся!

Answer 1

Вызовите getUsers() каждый раз, когда вы добавляете нового пользователя для allUsers для обновления.

$scope.addUser = function() { 
    usersFactory.addUser($scope.newUser, function (data) { 
     $scope.currentUser = {'name': data.name}; 
     getUsers(); 
    }) 
} 

Answer 2

Код javascript выполняется асинхронно. Поэтому getUsers() вызывается до того, как новый пользователь завершит добавление в вашу базу данных. Чтобы решить эту проблему, вы можете включить вызов функции getUsers() внутри обратного вызова.

$scope.addUser = function() { 
    usersFactory.addUser($scope.newUser, function (data) { 
     $scope.currentUser = {'name': data.name}; 
     getUsers(); // <-- 
    }) 
} 

Также обратите внимание на угловые обещания https://docs.angularjs.org/api/ng/service/$q вместо использования обратных вызовов.