0
こんにちは、私はAngularJSを初めて使っています。私はここで呼び出されるので、リストやキューにアイテムを投稿するフォームのページを持っています。 submitを押すと、オブジェクトがキューに追加されます。その後、私はhttpのgetを呼び出して、新しいキューオブジェクトに値を設定します。しかし、これは期待どおりにページ上でリフレッシュされません。ここでAngularJSページが投稿後に更新されない
は私の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は' falsy（および$範囲があること.readQueue（）が呼び出されない）、またはバックエンドサービスが以前と同じデータで応答したことを示します。あなたのデバッガとネットワーク開発ツールを使って調べてください。 –
しかし、別の説明があります。ページに2つのmyCtrlインスタンスがあります。 Oneはフォームを送信し、もう1つはキューを表示します。フォームを処理するコントローラー内のキューを更新していますが、キューは表示されません。したがって、他のコントローラは独自の元のキューを使用します。 –
提案したように、元のコントローラの中にレスポンス部門を置いたときに動作します！ありがとうございました。 – Amiracle