La page js angulaire ne se rafraîchit pas après le post

Bonjour, je suis nouveau sur AngularJS. J'ai une page avec un formulaire que je poste des éléments sur une liste ou une file d'attente comme il est appelé ici. Lorsque j'appuie sur submit, l'objet est ajouté à la file d'attente. Ensuite, dans la méthode de succès de la publication, j'appelle le http get pour remplir le nouvel objet file d'attente. Mais cela ne se rafraîchit pas sur la page comme prévu.La page js angulaire ne se rafraîchit pas après le post

Voici mon 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>

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

    });

Source

2016-11-12 Amiracle

Si elle n'est pas rafraîchi, les explications les plus plausibles est que le poste n'a pas réussi (et le rappel de succès est donc pas appelé), ou que le '' data.success est falsy (et la portée de $ .readQueue() n'est donc pas appelé) ou que le service backend a répondu avec les mêmes données qu'avant. Utilisez votre débogueur et vos outils de développement réseau pour le savoir. –

Mais attendez, il y a une autre explication: vous avez deux instances myCtrl dans la page. L'un soumet le formulaire et l'autre affiche la file d'attente. Vous actualisez la file d'attente dans le contrôleur qui traite le formulaire, mais n'affiche pas la file d'attente. Ainsi, l'autre contrôleur utilise toujours sa propre file d'attente d'origine. –

Cela fonctionne quand je mets la réponse div à l'intérieur du contrôleur d'origine comme vous l'avez suggéré! Je vous remercie. – Amiracle

-1

Vous devez ajouter $ Délai d'attente dans votre contrôleur de manière à forcer la page à rafraîchir après le succès méthode est atteinte. La réponse ci-dessous pourrait vous aider.

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

});

Source

2016-11-12 13:25:53 Aravind

La page js angulaire ne se rafraîchit pas après le post

Répondre

Questions connexes