0

I am trying to add a user (which succesfully works in the backend. users get added to my db) but my view will not update when the user is added to the db.

I am working with Angular and Node for my backend.

I must mention that my form for adding a user is in a popup box (md-dialog --> angular material) but this should not be an issue as to why the view won't update properly. The user will show up in the list once I refresh my browser.

my code for adding the user (app.js)

//Function to add a user to the db
$scope.inviteUser = function(){
    $http.post('/api/users/invite', {
        'email': $scope.user.email,
        'role_id': $scope.user.role
    }, {
        headers: {
            "Content-Type": "text/plain"
        }
    })
    .success(function(data, status, headers, config) {
        console.log("Successfully saved a user to the DB", data);

        //$scope.userInfo = data;
        $scope.userInfo.push(data);

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

addUser.tmpl.html

  <md-dialog aria-label="" ng-controller="CalendarCtrl">
    <form name="form"  >
      <md-toolbar>
        <div class="md-toolbar-tools">
          <h1 class="customH1">Invite a user</h1>

          <span flex></span>
          <!-- <md-button class="md-icon-button" ng-click="closeDialog()">
            <md-icon md-svg-src="images/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
          </md-button> -->
        </div>
      </md-toolbar>
      <md-dialog-content>
        <div id="containerForm">
            <div layout="row">
              <md-input-container flex="">
                <div class="form-group" ng-class="{ 'has-success': form.email.$valid && submitted,'has-error': form.email.$invalid && submitted }">
                  <label>Enter the user's e-mail</label>
                  <input type="email" name="email" id="to" class="form-control" ng-model="user.email" required mongoose-error/>
                  <p class="help-block" ng-show="form.email.$error.email && submitted">
                    Doesn't look like a valid email.
                  </p>
                  <p class="help-block" ng-show="form.email.$error.required && submitted">
                    What's your email address?
                  </p>
                  <p class="help-block" ng-show="form.email.$error.mongoose">
                    {{ errors.email }}
                  </p>
                </div>
              </md-input-container>
            </div>  

            <br /><br />

            <div ng-show="form.email.$dirty && form.email.$valid">
              <h5>Assign one of the following role's:</h5>

              <div id="wrapperRadioButtons">
                <md-radio-group ng-model="user.role">
                  <md-radio-button ng-repeat="userrole in roleInfo" value="{{userrole.id}}" class="md-primary">{{userrole.role}}</md-radio-button>
                </md-radio-group>
              </div>
              </div>

            <br />

        </div>
      </md-dialog-content>
      <div class="md-actions" layout="row" >
        <md-button ng-click="closeDialog()" class="md-primary">Cancel</md-button>

        <md-button id="send_email" ng-click="inviteUser(); closeDialog()" class="md-primary">Invite</md-button>
      </div>
    </form>
  </md-dialog>
GY22
  • 755
  • 2
  • 17
  • 48
  • dialog has it's own controller. How is `$scope.userInfo` in dialog controller connected to controller in other part of view? – charlietfl Aug 05 '15 at 13:46
  • 1
    I have two questions: is the success function after post actually retrieving any data, as in: is your server sending the user back? Secondly are you adding to the $scope.userinfo in the popup controller and expecting it to show up in its parent controller? (that won't work) – skubski Aug 05 '15 at 13:47
  • yes so when i add a user the data is send to the server and store in the db but i was also expecting that my user list would update automatically with the newly created user. http://gyazo.com/f2a7ac28f0680be22fdf2bb255f4cde4 – GY22 Aug 05 '15 at 13:50
  • @charlietfl, through my ng-controller="CalendarCtrl" that is define at the top in my addUser.tmpl.html – GY22 Aug 05 '15 at 13:51
  • You'll have to , like you're trying, to push the object into the array. But I'm suspecting, like @charlietfl, that you're actually pushing the new user in an array bound to the popup controller's $scope. The controller that handles the view / display of users , isn't using the same array. (That's my guess) – skubski Aug 05 '15 at 13:53
  • You are missing the point. Controllers each have there own `$scope`. Where does `$scope.userInfo` get defined in the CalendarCtrl? Is it through a service? Show the full controller – charlietfl Aug 05 '15 at 13:54
  • They have a parent - child relation @charlietfl , so prototypal inheritance is operative. Meaning that the the child controller will also look for properties in the parents scope but not the other way around. – skubski Aug 05 '15 at 13:57
  • @skubski I rather doubt that for a dialog there is a parent/child relationship – charlietfl Aug 05 '15 at 13:58
  • @charlietfl it is always possible to set an objects prototype, irrelevant in this case however. But yes, a service would be more appropriate to share data, I agree. – skubski Aug 05 '15 at 14:03

2 Answers2

0

You are trying to update the userInfo property in the $scope of CalendarCtrl, but based on the HTML you posted, there is no such property in that $scope. If userInfo belongs to a different $scope, then you can either:

  1. Assign the returned data to the $rootScope so that that other $scope can use it; not recommended (see below).
  2. Use a service to pass the data to the other $scope; this is the preferred approach because it does not pollute the global $rootScope. See Passing data between controllers in Angular JS? for this approach.
Community
  • 1
  • 1
Gerry
  • 628
  • 6
  • 16
0

The popup box is irrelevant in this case. You should bind the data in the controller to a service and it will automatically reflect in the page without refreshing the page, just update the user list in the service after adding the new user.

Check the answer here and take a look at the fiddle for a detailed example for your service.

Community
  • 1
  • 1
bosch
  • 1,089
  • 11
  • 16