javascript - 如何正确使用 XHR 创建自己的 Angular 服务？

Question

我对 AngularJS 事物非常陌生。需要使用表单中的其他数据进行文件上传，我找到了一些脚本和 Angular 插件，但我使用自己的服务调用$xhr。我能够发送文件，但我收到错误、错误(不是真正的错误错误，我只是这样命名)或者我无法正确使用 AngularJS。这是:
.
JS

var app = angular.module('ngnNews', []);
app.factory('posts', [function () {...}]); // I reduced the codes

app.factory('$xhr', function () {
    var $xhr = { reqit: function (components) { ... //My Xml HTTP Request codes here }}
    return $xhr;
});

app.controller('MainCtrl', ['$http','$scope','$xhr','posts',
    function ($http, $scope, $xhr, posts) {
        $scope.posts = posts.posts;

        $scope.files = [];
        var newPost = { title: 'post one', upvotes: 20, downvotes: 5 };
        $scope.posts.push(newPost);

        $scope.addPost = function () {
            $xhr.reqit({
                form: document.getElementById('postForm'),
                callbacks: {
                    success: function (result) {
                        if (result.success) {
                            console.log($scope.posts); //[FIRST OUT]
                            $scope.posts.push(result.post);
                            $scope.title = '';
                            console.log($scope.posts); //[SECOND OUT]
                        }
                    }
                },
                values: { upvotes: 0, downvotes: 0 },
                files: $scope.files
            });
            ...
    }
}]);  

.
HTML

<form action="/Home/FileUp" id="postForm" method="post" enctype="multipart/form-data">
    <div class="form-group input-group">
        <span class="input-group-addon">Post Title</span>
        <input name="title" class="form-control" type="text" data-ng-model="title" />
    </div>
    <ul>
        <li ng-repeat="file in files">{{file.name}}</li>
    </ul>
    <button class="btn btn-primary" type="button" data-ng-click="addPost()">Add New</button>
</form>  

屏幕

Sample post displayed in list

.
问题

When I click first time Add New button everything works well until $scope.posts.push(result.post);. In console, [SECOND OUT] is here:

First object has $$hashKey but second object which sent from server(added by $scope.posts.push(result.post); function) doesn't have. I want to know why is this happening? But it's not only weird thing, when I second time click Add New button, everything completed successfully (No new logs in console, adding new post to list shown screen image above).

主要问题
我从服务器推送了返回值，但第一次点击时帖子列表(在屏幕中)不受影响。

问题
- 怎么了？或
- 我究竟做错了什么？感谢您的任何解释。

Answer 1

您在$$hashkey方面没有做错任何事。如果这是你关心的问题。当您将 ng-repeat 与对象数组一起使用时，默认情况下会将唯一的键附加到具有属性 $$hashkey 的项目。 。然后，将此属性用作将 DOM 元素与数组中的相应项(按标识)相关联的键。在数组中移动相同的对象会在 DOM 中以相同的方式移动 DOM 元素。您可以通过使用 track by 来避免这种情况(通过 Angular 在对象上添加附加属性)通过在对象上提供唯一的键或仅 $index 来使用 ng-repeat 。因此，Angular 将使用您提供的唯一标识符将 DOM 元素与相应的数组项关联起来，而不是创建唯一键并将其附加到 $$haskey 属性。

  ng-repeat="post in posts track by $index"

或者(id数组中的每个对象都有一个唯一的id，比如id)

 ng-repeat="post in posts track by post.id"

既然你说你正在使用 my xml http request code here ，我假设它不在 Angular 上下文内，因此您需要使用 $scope.$apply() 手动执行摘要循环就是其中之一。

       $scope.addPost = function () {
        $xhr.reqit({
            form: document.getElementById('postForm'),
            callbacks: {
                success: function (result) {
                    if (result.success) {
                        $scope.posts.push(result.post);
                        $scope.title = '';
                        $scope.$apply();//<-- here
                    }
                }
            },

但理想情况下，您可以使用 $q 包装您的 xhr 实现。如果您从 api 传递 $q promise ，则无需执行手动 $scope.$apply()到处。因为 $q promise 链接将处理摘要循环调用。