AngularJS просмотр не обновляется после http-запроса

Question

angular.module('cmfApp').controller('InventoryAddCtrl', ['$scope', '$http', '$timeout', function($scope, $http, $timeout){ 

    $scope.submit = function() { 
     var postData = { 
      ihenterprise_logisticsbundle_stockItem: { 
       name: $scope.formData.name, 
       itemNo: $scope.formData.itemNo 
      } 
     } 

     $http({ 
      method : 'POST', 
      url  : Routing.generate('ih_enterprise_api_stock_item_new'), 
      data : $.param(postData), // pass in data as strings 
      headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload) 
     }) 
     .success(function(data) { 
      $scope.stockItems = $scope.stockItems.concat(data); 
      //console.log($scope.stockItems); This logs with the new item 
     }).error(function(error) { 
      console.log(error); 
     }); 
    }; 

}]); 

Вид просто не обновляется, когда я конкатенирую массив массива, если я пытаюсь вызвать $ scope. $ Apply(); после concat, я получаю дайджест в процессе, я также попытался использовать setTimeout, не помогает.

Вот HTML (Прут):

{% block listTable %} 
    <table class="table table-condensed table-expanding"> 
     <thead> 
     <tr> 
      <th>&nbsp;</th> 
      <th>Id</th> 
      <th>Created At</th> 
      <th>Navn</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr ng-repeat-start="stockItem in stockItems" data-toggle="collapse" data-target="#stockItem_{{ '{{stockItem.id}} '}}" class="accordion-toggle"> 
      <td> 
       <button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button> 
      </td> 
      <td>{{ '{{stockItem.id}} '}}</td> 
      <td>{{ '{{stockItem.created_at}} '}}</td> 
      <td>{{ '{{stockItem.name}} '}}</td> 
     </tr> 
     <tr ng-repeat-end=""> 
      <td colspan="6" class="hiddenRow"> 
       <div class="accordian-body collapse" id="package_{{ '{{stockItem.id}} '}}"> 
        test 
       </div> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
{% endblock %} 

Контроллер InventoryAddCtrl находится вне блока, и исходные данные правильно применены при обновлении страницы.

Answer 1

angular.module('cmfApp').controller('InventoryAddCtrl', ['$scope', '$http', '$timeout', function($scope, $http, $timeout){ 

$scope.submit = function() { 
    var postData = { 
     ihenterprise_logisticsbundle_stockItem: { 
      name: $scope.formData.name, 
      itemNo: $scope.formData.itemNo 
     } 
    } 

    $http({ 
     method : 'POST', 
     url  : Routing.generate('ih_enterprise_api_stock_item_new'), 
     data : $.param(postData), // pass in data as strings 
     headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload) 
    }) 
    .success(function(data) { 
//You need to use $apply here. 
    $timeout(function(){ 
     $scope.$apply(function(){  
     $scope.stockItems = $scope.stockItems.concat(data); 
     }); 
     }); 
     //console.log($scope.stockItems); This logs with the new item 
    }).error(function(error) { 
     console.log(error); 
    }); 
}; 

}]); 

Answer 2

Я не уверен, но я думаю, вы не определили $scope.stockItems, как пустой массив.

$scope.stockItems=[]; просто положить чуть выше $scope.submit() функции