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如何完成一个初始的书籍帖子？

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

1 个答案: