在 Angular js 中提交和更新视图时更新范围变量答案

【问题标题】：update scope variable on submit and update view in angular js在 Angular js 中提交和更新视图时更新范围变量
【发布时间】：2016-01-26 21:31:56
【问题描述】：

我正在使用 angularjs 创建我的第一个 Web 应用程序，一旦用户在输入框中提交文本/数字，我就无法让页面更新为新值。

我正在使用 Java8、MongoDB、angularJS 和 twitter 引导程序

HTML:

<td>
  <input type="text" class="form-control" placeholder="enter bugnumber" data-ng-model="auditdata.newbugnumber"> 

  <h4>Bug Numbers</h4>

  <a href="{{bugLink(a)}}" data-ng-repeat="a in parseBug(auditdata.bugnumber) track by $index">{{a}}</a>

</td>

<td>
  <button type="submit" data-ng-click="add(auditdata)" class="btn btn-danger" >Save</button>
</td>

在上面的 HTML 中，我在 ng-model=auditadata.newbugnumber 中接受用户的输入，但在服务器端，它仍然在 bugnumber 字段中得到更新。 newbugnumber 字段就像一个临时变量，仅用于将新数据发送到服务器。使用 temp 变量的原因是为了避免 angularjs 中的双向绑定。

我尝试在下面的 JS 中使用 $apply()、$watch 和摘要，但无法在视图中获取要更新的值。数据在视图中更新的唯一方法是当我重新加载页面时，这不是一个选项

app.controller('listCtrl', function ($scope, $http,$route) {

$scope.isCollapsed = true; 


$http.get('/api/v1/result').success(function (data) {
    $scope.audit = data;   

}).error(function (data, status) {
    console.log('Error ' + data);
})


$scope.add= function(bugInfo) {

     $http.post('/api/v1/result/updateBug', bugInfo).success(function (data) {
             bugInfo.newbugnumber='';
             console.log('audit data updated');

         }).error(function (data, status) {
             console.log('Error ' + data);
         }
   };   
});

服务器端更新功能

public void updateAuditData(String body) {

        Result updateAudit = new Gson().fromJson(body, Result.class);
        audit.update(
                new BasicDBObject("_id", new ObjectId(updateAudit.getId())),
                new BasicDBObject("$push", new BasicDBObject().append("bugnumber",
                        updateAudit.getNewbugnumber())));
    }

在集合中归档的错误编号是什么样的

> db.audit.find({"_id" : ObjectId("5696e2cee4b05e970b5a0a68")})
{
        "bugnumber" : [
                "789000",
                "1212"
        ]
}

【问题讨论】：

请提供 plunker、codepen 或 jsfiddle 以使您的问题更可验证
你能从你的 $http.post() onsuccess 函数中调用 $http.get() 吗？
@sjokkogutten 我确实在发布后调用了 $http.get() 并且它按预期工作，但不确定这是否是正确的方法。我在 $http angularjs 文档页面上注意到的一件事是 success 方法已被贬值并改用 then

标签： javascript java angularjs twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

根据您的评论，执行以下操作：

将您所有的 $http 处理放在服务或工厂中。这是一种很好的做法，可以使重用和测试更容易

app.factory('AuditService', function($http) {
  var get = function() {
    return $http.get("/api/...") // returns a promise
  };

  var add = function() {
    return $http.post("/api/...") // returns a promise
  };

  return {
    get: get,
    add: add
  }
});

然后在你的控制器中

// note the import of AuditService
app.controller('listCtrl', function ($scope, $http,$route, AuditService) { 

// other code here


// If insert is successful, then update $scope by calling the newly updated collection. 
// (this is chaining the events using then())
$scope.add = function(bugInfo) {
  AuditService.add().then(
    function(){ // successcallback
      AuditService.get().then(
        function(data){ // success
          $scope.audit = data; 
        },
        function(){ // error
          console.log('error reading data ' + error)
        })
    },
    function(error){ // errorcallback
      console.log('error inserting data ' + error)
    })  
});

同样的方法可以应用于所有的 CRUD 操作

【讨论】：