使用MEAN-Stack在出厂时无法在AngularJS中使用双向数据绑定

Question

我正在尝试构建一个单页应用程序，它列出了我的本地数据库(MongoDB)中的一些文件，但是AngularJS没有显示这些数据。当我通过Postman从Express-API获得它们时，一切都是正常的。我通过一个控制器获取它们，这个控制器调用一个工厂来获取数据。但是当我从数据库中删除一个文件时，AngularJS没有更新表。当我重新加载页面时，它显示了没有删除项的正确数据，但是为什么双向数据绑定不起作用？

这是我的index.html中的表内容：

  <div ng-controller="FileCtrl">
    <div ng-hide="files.length" class="alert alert-warning">Noch keine Files vorhanden!</div>
    <table ng-show="files.length" class="table">
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Path</th>
        <th></th>
        <th></th>
      </tr>
      <tr ng-repeat="file in filtered = (files | filter:searchtext | orderBy: 'name')" class="files-item">
        <td>{{file._id}}</td>
        <td>{{file.name}}</td>
        <td>{{file.path}}</td>
        <td><a href class="btn btn-default btn-sm" ng-click="fileFactory.playFile(file);">Play</a></td>
        <td><a href class="btn btn-default btn-sm" ng-click="fileFactory.removeFile(file._id);">Delete</a> </td>
      </tr>
    </table>
  </div>

这是我的app.js：

angular.module('picube', [])
.factory('fileFactory', function($http) {

    var files = [];
    return {
        getFiles: function(callback) {
            $http.get('http://localhost:8080/api/files/').then(function (Response) {   //takes all files from the api, tested with postman
                files = Response.data;  //Update Data
                callback(files);
            });
        },

        postFile: function(filepath){
            $http.post("http://localhost:8080/api/files/", filepath).then(function (Response) {   //adds a new file to the server-api, tested with postman
                files = Response.data;  //Update Data
            });
        },

        playFile: function(filepath){   //this is not important at the moment
            console.log("Play called");
            console.log(filepath);
        },

        removeFile: function(_id){ //deletes a file from server, tested with postman
            $http.delete("http://localhost:8080/api/files/" + _id).then(function(callback){
                files = callback.data;  //Update Data
            });
        }
    };
})
.controller('FileCtrl', function($scope, fileFactory) {
    $scope.fileFactory = fileFactory;

    init();

    function init() {
        fileFactory.getFiles(function(files){
            $scope.files = fileFactory.files;
        });
    }
});

Answer 1

您需要使用angular.copy来保留引用，否则您将覆盖它并破坏双向绑定：

$http.get('http://localhost:8080/api/files/').then(function (Response) {   //takes all files from the api, tested with postman
   files.length = 0; // clear the array
   angular.copy(Response.data, files);  //Update Data
        ...
});

Answer 2

我使用ngresource/$resource工厂而不是$http实现了我的DB处理(更多信息可在https://docs.angularjs.org/api/ngResource/service/$resource#！上的示例中获得)。

然而，它应该也可以与$http一起工作。我做了我的"removeFile"-equivalent，所以我实际上要么在删除后使用GET从服务器读取数据，要么当数据量变大时，最好只使用-method参数在file[]数组上使用splice索引-这是我建议的修改版本，供您尝试：

...
 removeFile: function(_id, index){ //deletes a file from server, tested with postman
        $http.delete("http://localhost:8080/api/files/" + _id).then(function(callback){
            $scope.files.splice(index, 1);
        });
    }
...    

相应地，在.html中，调用它以包含$index：

...
<td>
    <a href class="btn btn-default btn-sm" ng-click = "fileFactory.removeFile(file._id, $index)">Delete</a>
</td>
...

这里的理由是，我认为你的删除-method不会响应更新的完整文件列表-至少通常不会，但你必须自己更新本地内容。

希望这能帮到你。

Answer 3

好了，现在它起作用了。问题是files.length = 0，这是导致错误的原因。

原因是，angular.copy会自行清除数组(请参阅此处：array.copy)。这是可行的：

$http.get('http://localhost:8080/api/files/').then(function (Response) {
     angular.copy(Response.data, files);
});