http請求后AngularJS視圖未更新

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（Twig）：

{% 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()函數上方