javascript - Template doesn't render reloaded data: AngularJS -
i have 2 controllers communicate each other.
controller 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; });
controller 2:
$scope.edituser = function(id){ $http({ url: "/users/"+ id, method: "put", data: { "firstname":$scope.user.firstname, "lastname": $scope.user.lastname, } }); $scope.$emit("reloadusers"); }
my templates shown below (both modal dialogs):
template 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>
template 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>
essentially template 1
has list of users controller 1's
scope. on clicking user in template 1
, go template 2
displays user , has option edit (change first name , last name). once hit save
, make http put request, save data, close modal windows , call emit
.
the problem is: when open template 1
after this, see old first name , last name (not updated ones). when click on user open template 2
, updated names shown. how ensure data updated in template 1
? isn't angular supposed update when sees change in $scope
variable?
i try rewriting following code:
$scope.edituser = function(id){ $http.put("/users/" + id, { firstname: $scope.user.firstname, lastname: $scope.user.lastname }) .success(function(){ $scope.$emit("reloadusers"); }); }
hope works!
edit:
custom update method.
angular.module('unknown', ['ngresource']) .factory('users', ['$resource', function($resource){ return $resource('/users/:id', { id:'@id' }, { update: { method: 'put' }, get: { method: 'get' } }); }]);
Comments
Post a Comment