Question

我正在尝试添加一个用户（在后端成功运行。用户被添加到我的数据库中）但是当用户添加到数据库时我的视图不会更新。

我正在为我的后端使用Angular和Node。

我必须提一下，我添加用户的表单位于弹出框中（md-dialog - ＆gt; angular material），但这不应成为视图未能正确更新的问题。刷新浏览器后，用户将显示在列表中。

我添加用户的代码（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>

Answer 1

您正在尝试更新CalendarCtrl的$ scope中的userInfo属性，但根据您发布的HTML，该$ scope中没有此类属性。如果userInfo属于不同的$ scope，那么您可以：

将返回的数据分配给$ rootScope，以便其他$ scope可以使用它;不推荐（见下文）。
使用服务将数据传递给其他$ scope;这是首选方法，因为它不会污染全局$ rootScope。有关此方法，请参阅Passing data between controllers in Angular JS?。

Answer 2

在这种情况下，弹出框无关紧要。您应该将控制器中的数据绑定到服务，它将自动反映在页面中而不刷新页面，只需在添加新用户后更新服务中的用户列表。

检查答案here并查看小提琴，了解服务的详细示例。

查看未添加用户的更新

2 个答案: