Search code examples
angularjsdjangongresource

DOM not updating after POST


Using https://github.com/blacklocus/angular-django-rest-resource in my Django+angular app and my ng-repeat updates correctly when issuing a 'DELETE' request, but doesn't with 'POST'

relevant controller code:

var Project = djResource('api/projects/:id', {'id': "@id"});
$scope.projects = Project.query();
$scope.newProject = new Project;
$scope.createProject = function(){
  apiSrv.request('POST', 'projects/', $scope.newProject,
   function(data){
    $scope.projects = Project.query();
   },
   function(err){
    $log.error(err);
   }
  );
};
$scope.deleteProject = function(id){
  apiSrv.request('DELETE', 'projects/'+id, {},
   function(data){
    $scope.projects = Project.query();
   },
   function(err){
    $log.error(err);
   }
  );
};

relevant service code:

.factory('apiSrv', ['$http', function($http){
  var apiSrv = {};

  apiSrv.request = function(method, url, args, successFn, errorFn){
    return $http({
      method: method,
      url: '/api/' + url,
      data: JSON.stringify(args)
    }).success(successFn).error(errorFn);
  };

  return apiSrv;
}]);

I've tried calling $scope.$apply(); during the POST callback. Also tried $scope.projects.push(project);.

I've also tried

$scope.newProject.$save(function(data){
  $scope.projects = Project.query();
});

along with $scope.projects.push(project); and $scope.$apply(); in the $save callback and nothing I've tried updates the DOM. It works fine in the deleteProject function, the DOM updates to show the updated state of $scope.projects. Adding $log.info($scope.projects); lists any newly added projects, but again, the DOM stays the same regardless of what I do. Any ideas? Thanks.


Solution

  • Finally resolved this. I'm using Angular Material, and my project form was inside a material dialog which apparently creates an isolate scope. I needed to assign the current scope as a property of the dialog then reference the model via that property.

    e.g.

    $mdDialog.show({
        controller: function(){this.parent = $scope;},
        controllerAs: 'ctrl',
        ...
    

    and in my view use ng-model: "ctrl.parent.newProject.project_name" and so on.