Angular scope $apply() to update my scope not refreshing data on the page

Question

Im have data stored in a scope.

I want to update the scope with new values.

So first my angular code looks like this

    $scope.objects = [
{id: 1, name: "ma route angulaire1", cote: "10.5", style: "jungle", centre: "supercentre", img: "x"},
{id: 2, name: "ma route angulaire2", cote: "10.5", style: "jungle", centre: "supercentre", img: "x"},
{id: 3, name: "ma route angulaire3", cote: "10.5", style: "jungle", centre: "supercentre", img: "x"}
];

and it is displayed on the page using ng-repeat

 <div ng-controller="objectCtrl" >
     <div id="object_container" ng-repeat="object in objects track by $index">
     <div>{{object.name}}</div>
  </div>

So far so good but then I update the scope using apply with a new array that comes from my ajax script (not inside the angular app or controller)

   var scope = angular.element($("#object_container")).scope();
        scope.$apply(function(){
        console.log(scope.objects);  // before update
        scope.objects = data[1];
        console.log(scope.objects);  // after update
    });

So in the console I can see the new values asign to the scope but on the page itself it is not getting updated.

Edit

My code; Angular

'use strict';

var angular_app = angular.module('angular_app', []);


 angular_app.controller('objectCtrl', ['$scope', function ($scope) {

    $scope.objects = [
{id: 1, name: "ma route angulaire1", cote: "10.5", style: "jungle", centre: "supercentre", img: "x"},
{id: 2, name: "ma route angulaire2", cote: "10.5", style: "jungle", centre: "supercentre", img: "x"},
{id: 3, name: "ma route angulaire3", cote: "10.5", style: "jungle", centre: "supercentre", img: "x"}
];

  }]);

The javascript that I use to update the scope from outside my angular app. It is a promise javascript function to handle ajax request

 var data = load_content(target).then(function (response) {
           // console.log('Target -> ' + target);
            data = response;


        var scope = angular.element($("#object_container")).scope();
        scope.$apply(function(){
            console.log(scope.objects);
        scope.objects = data[1];
        console.log(scope.objects);
    });

data[1] is built with php like this;

$data = array();
$data[0] = "OK";  // status from server OK/ERROR
$data[1][0]->id = "4";
$data[1][0]->name = "route Angulaire";
$data[1][0]->cote = "10.5";
$data[1][0]->style = "jungle";
$data[1][0]->centre = "some center";

** Load content JS function **

function load_content(target){
     return new Promise(function (resolve, reject) {
        $.ajax({
        url: '/ajax-processor.php',  
        type: 'POST',                  
        data: { 'ajaxKey':'MyKey' ,'target': target },
        success: function (data, status) {   
            resolve(data);  
            console.log(data);

           if(data[0] == 'ERROR'){    // display error

                $('#error_frame').removeClass("hidden");
                $('#error_frame').html(data[1]);

            }
            else if(data[0] == 'OK'){  // we proceed

            }
        },
        error: function (xhr, desc, err) { // sinon il y a erreur
            console.log(xhr);
            console.log("Details: " + desc + "\nError:" + err);
            return;
        }
    });// end ajax call  


 });
}

Im am calling load content from this jquery event listener

$(document.body).ready(function () {
    $(document.body).on("click", "a", function (event) {
        event.preventDefault(event);
       // console.log('Clicked a link');
        var id = ($(this).attr("id"));
        var target = ($(this).attr("data-target"));
        var link = ($(this).attr("href"));
        var text = ($(this).text());
        var html = ($(this).html());
        /// vérification necessaire
        ///
        //$(container).addClass("visible");


        var data = load_content(target).then(function (response) {
           // console.log('Target -> ' + target);
            data = response;


        var scope = angular.element($("#object_container")).scope();
        scope.$apply(function(){
            console.log(scope.objects);
        scope.objects = data[1];
        console.log(scope.objects);
    });


        });


        $(target).html('<img scr="/images/html/ajax-load.gif"');
    }); // end on click a  
});  // end document ready

Whats missing?

Thank you

Try adding a `track by` in your `ngRepeat`. The change is likely not being detected. — zero298, Jan 08 '18 at 16:27
Why are you using `angular.element()` to get scope? You shouldn't even need `scope.$apply()` Where is `data` coming from? Post `objectCtrl` and how you are getting `data`. There is probably a more Angular way to do this. — zero298, Jan 08 '18 at 16:34
Why are you updating the data with something outside of AngularJS? — Kyle Krzeski, Jan 08 '18 at 16:36
Im updating the data like this because i use ajax to fetch data from a mysql db with PHP. — MadeInDreams, Jan 08 '18 at 16:45
This is begging the question. You still aren't giving a logical reason why you need to update data outside of the AngularJS context. You can use `$http` to make AngularJS aware ajax requests to your PHP backend. Show `load_content()` so that we might be able to make this whole thing more Angular. — zero298, Jan 08 '18 at 16:57
I would love to go more angular on this. But since the app is really big and many part of the site are interacting with eachother i ran into problem when it came to controllers passing data to each other. And i was first using nodeJS along with angular but i found it hard to find a hosting service with nodeJS along so i came back to ajax — MadeInDreams, Jan 08 '18 at 17:06
Also try using ng-click attribute instead of $(document.body).on("click", "a"... — nicolascolman, Jan 08 '18 at 17:45
Same issue with the all angular version https://stackoverflow.com/questions/48157503/angular-page-not-being-refreshed-after-update-using-http-post — MadeInDreams, Jan 08 '18 at 20:21

Angular scope $apply() to update my scope not refreshing data on the page

0 Answers0