Angular Reload another Controller after POST

Question

as i mentioned in title, i just wanted to reload (without page refresh) another controller with updated data after POST here my Code .

There is no issue on saving data to database.

Script

var app = angular.module('userBase', []);
app.controller('listUsers', function($scope,$http) {
    $http.get("req.php")
        .then(function (response) {
            $scope.userloop = response.data.reqresponse;
        });

});

app.controller('addUsers', function($scope,$http) {

    $scope.buttonFire = function() {
        $http.post("add.php",{'name': $scope.name, 'email': $scope.email})
            .success(function(data, status, headers, config){

            });
    }

});

View

<div ng-controller="listUsers">
    <ul ng-repeat="x in userloop">
        <li>{{ x.Name }} - {{ x.Email }} </li>
    </ul>
</div>

<div ng-controller="addUsers">
    <p>Name: <input type="text" ng-model="name"></p>
    <p>Email: <input type="text" ng-model="email"></p>
    <span ng-bind="name"></span> and <span ng-bind="email"></span><br/>
    <button ng-click="buttonFire()">Send or Save</button>
</div>

Slava Utesinov · Accepted Answer · 2016-07-15 07:14:58Z

1

You can solve your problem with the help of events infrastructure:

app.controller('listUsers', function($scope,$http) {
    $scope.on('newuser', function(event, data){
        load(true);

        //or you can do this: (without row above, i.e. without performing 
        //request to the server)
        //$scope.$apply(function(){
        //     $scope.userloop.push(data);
        //}); 
    });

    var load = function(isEvent){
        $http.get("req.php")
          .then(function (response) {
                $scope.userloop = response.data.reqresponse;
                if(isEvent)
                     $scope.$digest();
          });
    };
    load();
});

app.controller('addUsers', function($scope,$http) {

    $scope.buttonFire = function() {
        var newuser = {'name': $scope.name, 'email': $scope.email};
        $http.post("add.php", newuser)
            .success(function(data, status, headers, config){
                  $scope.$parent.$broadcast('newuser', newuser);
            });
    }

});

edited Jul 15, 2016 at 7:14

answered Jul 15, 2016 at 6:33

Slava Utesinov

13.5k2 gold badges21 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joel Jerushan Over a year ago

Thank You So Much This Helped Me :)

Collectives™ on Stack Overflow

Angular Reload another Controller after POST

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related