Как я могу обновить свою угловую область после вызова AJAX?

Question

Моя функция добавления в лайтбокс здесь не работает: http://icon.pha -group.com / , потому что мое приложение Angular загружается до содержимого AJAX. Я знаю, что мне нужно как-то назвать свое приложение Angular из успеха AJAX, но я не уверен, как. Причина этого заключается в том, что на других страницах содержимое не загружается динамически. Вот успех:

$.ajax({
//url: bobz.ajax_url,
url: "/wp-admin/admin-ajax.php",
data: {
    action: 'do_filter_posts',
nonce: bobz.nonce,
params: $params
},
type: 'post',
dataType: 'json',
success: function(data, textStatus, XMLHttpRequest) {

    if (data.status === 200) {
        $content.html(data.content);
    }
    else if (data.status === 201) {
        $content.html(data.message);    
    }
    else {
        $status.html(data.message);
    }

    //all done so call cycle script
    script_cycle();
    // Cookies.set('pageA-selection', '#page=3  ');
    //console.log(data.content);
 },

И вот начало моего приложения Angular add to lightbox:

var app = angular.module('lightbox', ['ngSanitize']);

app.controller('lightboxCtrl', function($scope, $http) {

function IsJsonString(str) {
    try {
        JSON.parse(str);
    } catch (e) {
        return false;
    }
    return true;
}


$http.get('/wp-admin/admin-ajax.php?action=lightbox_list_ajax').success(function(data) {

    if (typeof(Storage) !== "undefined" &&
        localStorage.getItem("lightbox_list") !== null ||
        localStorage.getItem("lightbox_list"))
    {
        var selectedOption = localStorage.lightbox_list;


    //} else if(data)
    //{
    //    var selectedOption = data[0];
    //
    //    localStorage.setItem("lightbox_list", JSON.stringify(selectedOption));

    }else{
        var selectedOption = null;
    }

    if(IsJsonString(selectedOption))
    {
        $scope.data = {
            availableOptions: data,
            selectedOption: JSON.parse(selectedOption) //This sets the default value of the select in the ui
        };

    }else{

        $scope.data = {
            availableOptions: data,
            selectedOption: selectedOption //This sets the default value of the select in the ui
        };
    }

console.log(selectedOption);
}).error(function(){
    console.log('unable to load lightbox lists');
});

Answer 1

используйте $scope.$apply() внутри ответа ajax

success: function(data, textStatus, XMLHttpRequest) {

    if (data.status === 200) {
        $content.html(data.content);
    }
    else if (data.status === 201) {
        $content.html(data.message);    
    }
    else {
        $status.html(data.message);
    }

    //all done so call cycle script
    script_cycle();
    $scope.$apply()
 },

Но учтите, что использование $ajax в угловых - это очень плохая привычка. Используйте сервис $http, который является встроенным угловым сервисом, и вам не нужно звонить $apply в $ http.