发布后Angular js页面不刷新答案

【问题标题】：Angular js page doesn't refresh after post发布后Angular js页面不刷新
【发布时间】：2016-11-12 13:06:50
【问题描述】：

您好，我是 AngularJS 的新手。我有一个带有表单的页面，我在列表或队列上发布项目，因为它被称为此处。当我按下提交时，对象被添加到队列中。然后在帖子的成功方法中，我调用 http get 来填充新的队列对象。但这并没有按预期在页面上刷新。

这是我的html：

<html>
<head>
{% block stylesheets %}
<link href="{{ asset('css/style.css') }}" rel="stylesheet" />
<link href="{{ asset('bootstrap/css/bootstrap.min.css') }}"
    rel="stylesheet" />
{% endblock %}
</head>
<body>
    {% block javascripts %}
    <script src="{{ asset('js/jquery-3.1.1.min.js') }}"></script>
    <script src="{{ asset('js/angular.min.js') }}"></script>
    <script src="{{ asset('js/app.js') }}"></script>
    {% endblock %}
    <script>

    </script>
    <div class="container">
        <div class="row">
            <div ng-app="myApp">
                {{ '{{ formData }}' }}
                <div class="col-md-5">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h1>New Customer</h1>
                        </div>
                        <div class="panel-body">
                            <div ng-controller="myCtrl">
                                <form ng-submit="processForm()">
                                    <div class="wrap">{% include 'queue/services.html.twig'
                                        %} {% include 'queue/details.html.twig' %}</div>
                                </form>
                            </div>
                        </div>


                    </div>
                </div>

                <div class="col-md-2"></div>

                <div class="col-md-5">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h1>The Queue</h1>
                        </div>
                        <div class="panel-body" ng-controller="myCtrl"
                            ng-init="readQueue()">
                            <ul>
                                <li ng-repeat="x in queueList">{{ '{{ x.type}}' }} {{'{{
                                    x.name }}'}} {{ '{{ x.service }}' }}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</body>
</html>

这里是js：

var app = angular.module('myApp', []);
      app.controller('myCtrl', function($scope, $http) {
        $scope.processForm = function() {
            $http({
                method : 'POST',
                url : 'http://localhost/firmstep/web/app_dev.php/queue/add',
                data : $.param($scope.formData), 
                headers : {
                    'Content-Type' : 'application/x-www-form-urlencoded'
                }
            }).success(function(data) {
                console.log(data);

                if (!data.success) {
                } else {
                    $scope.readQueue();
                }
            });
        },
        $scope.formData = {};
        $scope.queueList = {};
        $scope.services = [ {
            "0" : "Housing",
        }, {
            "1" : "Benefits",
        }, {
            "2" : "Council Tax",
        }, {
            "3" : "Fly-tipping",
        }, {
            "4" : "Missed Bin"
        } ],

        $scope.readQueue = function() {
            $http.get("http://localhost/firmstep/web/app_dev.php/queue/read").then(
                    function(response) {
                        $scope.queueList = response.data;
                        $scope.$apply();
                    });
        }

    });

【问题讨论】：

如果它没有被刷新，最合理的解释是帖子没有成功（因此没有调用成功回调），或者data.success 是假的（和$scope .readQueue() 因此没有被调用）或者后端服务响应与以前相同的数据。使用您的调试器和网络开发工具找出答案。
但是等等，还有另一种解释：页面中有两个 myCtrl 实例。一个提交表单，另一个显示队列。您正在刷新处理表单的控制器内的队列，但不显示队列。所以另一个控制器仍然使用它自己的原始队列。
按照您的建议，当我将响应 div 放入原始控制器中时，它可以工作！谢谢。
而不是 $scope.$apply();将使用 $scope.readQueue();它会工作的。

标签： angularjs http-post page-refresh

【解决方案1】：

您必须在控制器中添加 $timeout 以便在到达成功方法后强制页面刷新。下面的答案可能会对你有所帮助。

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

            $http({
                method : 'POST',
                url : 'http://localhost/firmstep/web/app_dev.php/queue/add',
                data : $.param($scope.formData), 
                headers : {
                    'Content-Type' : 'application/x-www-form-urlencoded'
                }
            }).success(function(data) {
                $timeout(function() {
                    console.log(data);

                    if (!data.success) {
                    } else {
                        $scope.readQueue();
                    }
                }, 3000);
            });

    },
    $scope.formData = {};
    $scope.queueList = {};
    $scope.services = [ {
        "0" : "Housing",
    }, {
        "1" : "Benefits",
    }, {
        "2" : "Council Tax",
    }, {
        "3" : "Fly-tipping",
    }, {
        "4" : "Missed Bin"
    } ],

    $scope.readQueue = function() {
        $http.get("http://localhost/firmstep/web/app_dev.php/queue/read").then(
                function(response) {
                    $scope.queueList = response.data;
                    $scope.$apply();
                });
    }

});

【讨论】：