Question

您好我是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();
                    });
        }

    });

Answer 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();
                });
    }

});

发布

1 个答案: