0

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.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
MadeInDreams
  • 1,991
  • 5
  • 33
  • 64

2 Answers2

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

georgeawg
  • 48,608
  • 13
  • 72
  • 95
  • Absolutly wonderfull! This is working. All I had to do was to point everything to a common controller. For some reason I didnt think it was possible to have controllers inside controllers. Thank you Sir. Can I suggest you add the common parent controler code in your awnser? – MadeInDreams Jan 08 '18 at 23:04
0

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

seawave_23
  • 1,169
  • 2
  • 12
  • 23