Question

我仍在尝试学习 angular 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

每次为 allUsers 添加新用户时，请调用getUsers（）进行更新。

$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 而不是使用回调。

试图显示名称角度

2 个答案: