范围问题 - 页面未从兄弟控制器中的 http 帖子更新

本文介绍了范围问题 - 页面未从兄弟控制器中的 http 帖子更新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 ng-click 调用一个为范围请求新内容的函数.我通过调用由 php 处理的 post 请求来做到这一点.当我运行脚本时，我可以在控制台中看到更新的数据，但页面没有更新.

HTML;

AngularJS 应用程序；

'use strict';var angular_app = angular.module('angular_app', []);angular_app.controller('objectCtrl', ['$scope','$http', function ($scope,$http) {$http({方法:'获取'，网址:'ajax-processor.php'}).then(函数successCallback(响应){$scope.objects = response.data;});}]);angular_app.controller('objectNavCtrl', ['$scope','$http', function ($scope,$http) {$scope.update = function(){console.log('点击');$http({方法:'发布'，url: 'ajax-processor.php',数据:{'ajaxKey':'Mykey'}}).then(函数successCallback(响应){$scope.objects = response.data;控制台日志(响应数据)；});}}]);

我在页面加载时使用 get 方法并尝试使用 update 函数更新它.

解决方案

问题是两个控制器在不同的范围内.将公共数据放在父控制器的范围内:

angular_app.controller('objectNavCtrl', ['$scope','$http', function ($scope,$http) {$scope.update = function(){console.log('点击');$http({方法:'发布'，url: 'ajax-processor.php',数据:{'ajaxKey':'Mykey'}}).then(函数successCallback(响应){̶$̶s̶c̶o̶p̶e̶.̶o̶b̶j̶e̶c̶t̶s̶̶=̶̶r̶e̶s̶p̶o̶n̶s̶e̶.̶d̶a̶t̶a̶;̶d̶a̶t̶a̶;̶$scope.common.objects = response.data;控制台日志(响应数据)；});}}]);

有关详细信息，请参阅

AngularJS 开发人员指南 - 范围层次结构
AngularJS Wiki - 了解作用域.

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.

The 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>

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

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

For more information, see

AngularJS Developer Guide - Scope Hierarchies
AngularJS Wiki - Understanding Scopes.

这篇关于范围问题 - 页面未从兄弟控制器中的 http 帖子更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！