1

new at this.

I have 2 div's; When I use one to post new value into the server, the post action works fine.

How do ensure this post updates the scope in the other div? (to update the div with the new entry using ng-repeat)

The HTTP.post action seems to be working as the data appears on refresh.

I have tried $scope.apply() but it doesn't appear to be working.

// this is the controller to get the data from the server
  app.controller('projectsController', 
       function projectsController($scope, projectsFactory){ 
               $scope.projects =    projectsFactory.query();
       }); 

and the factory to get the data from server

    app.factory('projectsFactory', 
       function($resource,localStorage, $rootScope, $http){
         return $resource('/api/project:id', {id: '@id'});
        });

This is the controller to take the user input and post to back to the server

     app.controller('projectEditController', function($scope, projectEdit){
                $scope.projectEdit =    projectEdit;
     });

And the service to post the data to the server

         app.service('projectEdit', 
                   function projectEdit(localStorage,$rootScope, $http) {

        var self = this;

        self.add = function(newProject,projects) {
            newProject = angular.copy(newProject);

              var newProject = (JSON.stringify(newProject));

        return $http.post('/api/project', newProject )
                    .then(function(response) {
                     newProject.id = response.data.id;

    });

};

Which seems to be fine as it posts the data to the Sever fine.

What I am trying to figure out is how to get the "$scope.projects = projectsFactory.query();" to update once the post operation is complete.

this will update the display in the HTML, which is the goal.

Hopefully this is an easy solve for a good developer, but I am stumped! Thanks for your time.

Conor

1
  • You could $broadcast an event and attach the results to it. Then in your controller you listen ($on) for the event and act appropriately.
    – m.e.conroy
    Sep 6, 2013 at 17:09

1 Answer 1

0

Create 1 wrapper div, and set your controller to it with ng-controller. Put your 2 divs in the wrapper div. Now the scope created by your controller is available in both divs, this is the easy way. When something updates data in that scope, and you have other things in the dom referencing that variable, then the dom will refresh like you want. If you really want different controllers for each child div, that's fine, just be careful around inherited scopes. It really is much easier to just have one controller in a situation like this. By the way, I saw that you mentioned scope.apply(). Be careful, apply() is a real javascript function, and NOT the one you want. You should call scope.$apply(), $apply is the angular function, and to avoid confusion, you could call scope.$digest instead.

1
  • Thanks a million, my code was not well indented, so re-wrote it.
    – conr404
    Sep 9, 2013 at 14:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.