Scoping issue - page not being updated from http p

2019-03-06 17:09发布

问题:

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.

回答1:

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.


回答2:

You are tracking the changes by id. So as long the object's ids don't change, the page won't be refreshed. Try to leave the track by out or for better performance, do it with some properties you compare or your own comparer function as described here: ng-repeat with track by over multiple properties