单击任何按钮都会触发我的UserService.getUsers函数，但不应发生这种情况

问题描述

因此，我将服务写入了我的http请求，以添加和获取服务。 在我的所有项目中，我都使用弹出框（md对话框->角形材质）。 现在我面临2问题。 第一个是在添加用户后，我将检索所有用户，因此我的用户列表将显示为两倍。 第二个问题是，当应用程序加载时正确显示了用户列表，但是单击任何触发我的弹出窗口的按钮时，用户列表将使其自身翻倍。

我想知道的是为什么会这样以及如何解决。

这是我的应用程序的视觉效果->

我的app.js代码的一部分：

zazzleApp.factory('UserService', function ($http) {
        var UserService = {};

        UserService.userList = []//this is the array of users that we use in the controller (and in the page)
        //whatever resides in this array will be shown on the page (because the controller is bound to it)

        //get the users from the API
        UserService.getUsers = function () {
        $http.get("api/users") //your API url goes here
            .success(function(dataFromServer){
                console.log('LOGGING DATADROMSERVER ', dataFromServer);

                dataFromServer.forEach(function(user, index, arr) { 
                    UserService.userList.push(user); 
                })


                //here you should update the usersList from the server like this:
                UserService.usersList = dataFromServer;
                return dataFromServer;
            })
            .error(function(errorFromServer){
            //something went wrong, process the error here
                console.log("Error in getting the users from the server");
            })
        };

        UserService.addUser = function (pUser) {
        //here you should do the $http.post and write some code on the .success() event. 
        //Just for an example I used here the .get() method to show you how to process the request, you should replace it
        //note the return $http.post below which takes our promise further to the controller so we can use it there if we want:
            return  $http.post('api/users/invite', {
                    'email': pUser.email,
                    'role_id': pUser.role
                }, {
                    headers: {
                        "Content-Type": "text/plain"
                    }
                })
            .success(function (data, status, headers, config) {
                //code to run if all went well:
                console.log("Service: the user has been added", data);
                //add the new user to the list. 
                //actually, you may want to call UserService.getUsers() here to get an updated list of users: all of them will automagically reflect in the page without refresh:
                UserService.usersList.push(pUser);

            })
            .error(function (data, status, headers, config) {//we had an error
                console.log("Failed to add user to DB");
            });
        };

        return UserService;
    })

//START CONTROLLER
angular.module('zazzleToolPlannerApp')
    .controller('CalendarCtrl', function ($scope, $mdDialog, $http, $rootScope, $timeout, User, Auth, UserService) {

        $scope.newUser = {};//this is the new user object. You can initialise it however you want
        $scope.newUser.email = "";//initialize the data for the new user
        $scope.newUser.role = "";

        //this is how you bind the list to the data in the service:
        $scope.users = UserService.userList;

        $scope.isAdmin = Auth.isAdmin;
        $scope.getCurrentUser = Auth.getCurrentUser;

        //ask the service to grab the data from the server. This is bound to the first button in the page
        $scope.getDataFromService = function () {
            UserService.getUsers(); //after this gets called, the data will be shown in the page automatically
        }
        $scope.getDataFromService();

        //ask the service to add a new user with the API (called from the second button):
        $scope.addUserWithService = function () {
            //note that you can process the promise right here (because of the return $http in the service)
            UserService.addUser($scope.newUser)
                .success(function(data){
                    //here you can process the data or format it or do whatever you want with it
                    console.log("Controller: the user has been added");
                    $scope.users = [];// EMPTY THE ARRAY
                    UserService.getUsers();

                })
                .error(function(data){
                    //something went wrong
                    console.log("Controller: the user has been added");
                });         
        }
   });