角度js頁面不會刷新後發佈

嗨，我是AngularJS新手。我有一個頁面，其中包含我在此處調用的列表或隊列中的項目。當我按下提交時，對象被添加到隊列中。然後在post的成功方法中，我調用http get來填充新的隊列對象。但是這並沒有像預期的那樣刷新頁面。角度js頁面不會刷新後發佈

這裏是我的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(); 
        }); 
     } 

    });

來源

2016-11-12 Amiracle

如果沒有被刷新，最合理的解釋是，後未成功（和成功回調因而不叫），或者說，''data.success是falsy（和$範圍.readQueue（）因此不會被調用），或者後端服務使用與以前相同的數據進行響應。使用你的調試器和你的網絡開發工具來找出答案。 –

但是等一下，還有另一種解釋：在頁面中有兩個myCtrl實例。一個提交表單，另一個顯示隊列。您刷新處理表單的控制器中的隊列，但不顯示隊列。所以另一個控制器仍然使用它自己的原始隊列。 –

它的工作原理，當我把響應div在原來的控制器，如你所建議的！謝謝。 – Amiracle

-1

您必須添加$超時到控制器中，以強制頁面成功後刷新方法已達到。以下答案可能對你有所幫助

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

});

來源

2016-11-12 13:25:53 Aravind

角度js頁面不會刷新後發佈

回答

相關問題