Question

我在angularjs中创建了我的第一个网络应用，并且一旦用户在输入框中提交文本/数字，就无法使用新值更新页面。

我正在使用Java8，MongoDB，angularJS和twitter bootstrap

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和digest，但无法在视图中获取要更新的值。数据在视图中更新的唯一方法是当我重新加载不是选项的页面时

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())));
    }

收集中的bugnumber如何看起来像

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

Answer 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操作

更新角度js中提交和更新视图的范围变量

1 个答案: