角度 ng-repeat 即使在空对象上也始终显示

Question

您好，我想将项目发布到服务器，每次成功添加后，使用 ng-repeat 自动将其添加到 DOM

<div class=""  ng-repeat="book in books" >
   <div id="eachBook">{{book.title}}</div>
</div>

要发布数据并上传图像文件，我使用 Jquery ajax 和 $state.go(".") 重新加载当前页面：

var fd = new FormData();
fd.append("file", bookImage);

$http({ 
    method: 'POST',
    url: "/someurl,
    data: fd,
    headers: {
        'Content-Type': undefined
    }
}).success(function(Image){
     var book_obj = {
         bookTitle: bookTitle,
         bookImage: Image._id
     };
     $http.post("url to owner book", book_obj)
         .success(function(data){
                 $scope.bookImage = data.bookImage;
             $timeout(function(){
                 alert("success", "successfully added your book");
                 $state.transitionTo('book', {}, { reload: true });
             },2000);                   
         })

})

问题在于第一次添加，DOM 仍然是空的，即使我使用 $state 重新加载页面，它仍然无法用于第一次添加。最后我需要通过点击刷新手动刷新页面。

第一次添加后，它工作正常。每添加一本书，它就会自动添加到 DOM..

知道如何在不手动渲染页面的情况下自动启动第一个吗？使用 $timeout 延迟刷新没有效果。

Answer 1

成功上市不只是简单的帖子吗？

var app = angular.module('myApp', []);
app.controller('bookCtrl', function($scope, $http, $timeout) {

  $scope.init = function(){
    $scope.title = 'initial book?'
    postBook();
  };
  $scope.books = [];

  $scope.post = function() {
    postBook();
  };

  function postBook(){
     if (!$scope.title) return;
    // timeout to simulate server post
    $timeout(function() {
      $scope.books.push({title:$scope.title});
      $scope.title = null;
    }, 1000);
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="bookCtrl" ng-init="init()">

  <div class="" ng-repeat="book in books">
    <div class="eachBook">{{book.title}}</div>
  </div>
  
  <input type="text" ng-model="title" /><button ng-click="post()">save</button>

</div>

编辑：不知道为什么你的 DOM 还没有准备好，但是 ng-init 来完成最初的书帖怎么样？