范围问题-无法从同级控制器中的http发布更新页面 [英] Scoping issue - page not being updated from http post in sibling controller
本文介绍了范围问题-无法从同级控制器中的http发布更新页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用ng-click调用一个函数，该函数请求范围的新内容.我通过调用由php处理的发布请求来做到这一点. 运行脚本时，我可以在控制台中看到更新的数据，但是页面没有被更新.
I am using ng-click to call a function that request new content for the scope. Im doing that by calling a post request that is handeled by php. When I run the script I can see the updated data in the console but the page is not being updated.
HTML；
<body>
<div id ="error_frame" class="system hidden"> </div>
<div ng-controller="objectNavCtrl" id = "content">
<a ng-click="update()">link</a>
</div>
<div ng-controller="objectCtrl" >
<div id="object_container" ng-repeat="object in objects track by object.id">
<div>{{object.name}}</div>
</div>
</div>
</body>
AngularJS应用；
The AngularJS app;
'use strict';
var angular_app = angular.module('angular_app', []);
angular_app.controller('objectCtrl', ['$scope','$http', function ($scope,$http) {
$http({
method: 'get',
url: 'ajax-processor.php'
}).then(function successCallback(response) {
$scope.objects = response.data;
});
}]);
angular_app.controller('objectNavCtrl', ['$scope','$http', function ($scope,$http) {
$scope.update = function(){
console.log('clicked');
$http({
method: 'post',
url: 'ajax-processor.php',
data: {'ajaxKey':'Mykey'}
}).then(function successCallback(response) {
$scope.objects = response.data;
console.log(response.data);
});
}
}]);
我在页面加载时使用get方法，并尝试使用update函数对其进行更新.
I use the get method when the page is loading and try to update it with the update function.
推荐答案
问题是两个控制器在单独的作用域内.将公共数据放在父控制器的范围内:
The problem is that two controllers are on separate scopes. Put the common data on the scope of a parent controller:
<body>
<!-- Common scope -->
<div ng-controller="parent as common">
<!-- Separate Scope -->
<div ng-controller="objectNavCtrl" id = "content">
<a ng-click="update()">link</a>
</div>
<!-- Separate Scope -->
<div ng-controller="objectCtrl" >
̶<̶d̶i̶v̶ ̶i̶d̶=̶"̶o̶b̶j̶e̶c̶t̶_̶c̶o̶n̶t̶a̶i̶n̶e̶r̶"̶ ̶n̶g̶-̶r̶e̶p̶e̶a̶t̶=̶"̶o̶b̶j̶e̶c̶t̶ ̶i̶n̶ ̶o̶b̶j̶e̶c̶t̶s̶ ̶t̶r̶a̶c̶k̶ ̶b̶y̶ ̶o̶b̶j̶e̶c̶t̶.̶i̶d̶"̶>̶
<!--use common scope here -->
<div id="object_container" ng-repeat="object in common.objects track by object.id">
<div>{{object.name}}</div>
</div>
</div>
</div>
</body>
angular_app.controller('objectNavCtrl', ['$scope','$http', function ($scope,$http) {
$scope.update = function(){
console.log('clicked');
$http({
method: 'post',
url: 'ajax-processor.php',
data: {'ajaxKey':'Mykey'}
}).then(function successCallback(response) {
̶$̶s̶c̶o̶p̶e̶.̶o̶b̶j̶e̶c̶t̶s̶ ̶=̶ ̶r̶e̶s̶p̶o̶n̶s̶e̶.̶d̶a̶t̶a̶;̶
$scope.common.objects = response.data;
console.log(response.data);
});
}
}]);
有关更多信息，请参见
- AngularJS Developer Guide - Scope Hierarchies
- AngularJS Wiki - Understanding Scopes.
这篇关于范围问题-无法从同级控制器中的http发布更新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
