Question

我有两个相互通信的控制器。

控制器1：

$scope.$on("reloadUsers", function (event) {
        $http.get("/users").success(function(data) {
            $scope.users = data;
            console.log($scope.users);
        });
    });

$http.get("/users").success(function(data) {
    $scope.users = data;
});

控制器2：

$scope.editUser = function(id){
        $http({
            url: "/users/"+ id,
            method: "PUT",
            data: {
                "firstName":$scope.user.firstName,
                "lastName": $scope.user.lastName,
            }
        });

        $scope.$emit("reloadUsers");
}

我的模板如下所示（两个模态对话框）：

模板1：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"  ng-controller="Controller 1">

<div ng-repeat="user in users>
    <a data-toggle="modal" data-target="#configureUserModal" href="#" ng-click="getUserId(user.id)" data-id="user.id">{{user.first_name + ' ' +user.last_name}}</a>
</div>

</div>

模板2：

<div ng-controller="Controller2" class="modal fade" id="configureUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<label for="">First Name:</label>
<input type="text" value="{{userData.first_name}}" ng-model="user.first_name" />

<label for="">Last Name:</label>
<input type="text" value="{{userData.last_name}}" ng-model="user.last_name"  />

<button type="button" class="btn btn-default" ng-click="editUser(userData.id)" data-dismiss="modal">Save</button>

</div>

基本上Template 1有一个我从Controller 1's范围获得的用户列表。单击Template 1中的用户后，我转到显示用户的Template 2，并可选择编辑（更改名字和姓氏）。点击Save后，我发出HTTP PUT请求，保存数据，关闭模态窗口并调用emit。

问题是：当我在此之后打开Template 1时，我会看到旧的名字和姓氏（不是更新的名字）。但是当我点击用户打开Template 2时，会显示更新的名称。如何确保在Template 1中更新数据？当它看到$scope变量发生变化时，是否应该更新它？

Answer 1

经过大量的重构，我终于弄明白了。首先，我实现了一项服务以获取我的用户列表。

angular.module('app').factory('usersService', function($http) {

    var usersService = {
        getUsers: function () {
            return $http.get("/users/").then(function (response) {
                return response.data;
            });
        }
    };

    return usersService;

});

我使用then因为HTTP GET请求是异步的，但在收到响应数据之前我无法显示我的用户列表。

然后在Controller 1中，我添加了这些代码：

    $scope.users = usersService;

    usersService.getUsers().then(function (asyncUsers) {
        $scope.users = asyncUsers;
    });

    $scope.$watch('users', function (users) {
        if (angular.isDefined(users)) {
            console.log("$scope.users has data");
        }
    });

    $scope.$on("reloadUsers", function (event) {
        usersService.getUsers().then(function (asyncUsers) {
            $scope.users = asyncUsers;
        });
    });

在这里，我基本上只是调用服务并等待$scope.users获取它的值。为了确切知道何时发生这种情况，我也只有一个$scope.watch函数。我还有一个函数，等待reloadUsers发出的Controller 2事件，该事件刷新$scope.users中的数据。

最后，在Controller 2，我有：

$scope.editUser = function(id){
        $http({
            url: "/user/"+ id,
            method: "PUT",
            data: {
                "firstName": $scope.user.firstName,
                "lastName": $scope.user.lastName,
            }
            }).success (function(data) {
                $scope.$emit("reloadUsers");
        });
    }

只需拨打$scope.emit即可表明是时候刷新了。所以我很确定我的问题是控制器之间缺乏通信，因为我没有使用过服务，以及异步GET请求。这个解决方案解决了两个问题！

Answer 2

我会尝试重写以下代码：

$scope.editUser = function(id){
    $http.put("/users/" + id, 
    {
        firstName: $scope.user.firstName,
        lastName: $scope.user.lastName
    })
    .success(function(){
        $scope.$emit("reloadUsers");
    });
}

希望它有效！

修改

自定义更新方法。

angular.module('unknown', ['ngResource']) .factory('Users', ['$resource', function($resource){ return $resource('/users/:id', { id:'@id' }, { update: { method: 'PUT' }, get: { method: 'GET' } }); }]);

模板不呈现重新加载的数据：AngularJS

2 个答案: