Массив Angularjs, не обновляющийся после вызова AJAX

Question

Я все еще новичок в Angularjs и все еще изучаю его.

Проблема заключается в том, что когда я определяю массив и прокручиваю его, используя «ng-repeat», элементы в ng-repeat не получают обновления после запуска функции. Вот пример jsfiddle.

http://jsfiddle.net/ematevosyan/t3ruzytk/8/

function MyCtrl($scope) { 

    // init google maps auto complete input 
    var options = { 
     types: ['(cities)'] 
    }, 
    input = document.getElementById('searchTextField'), 
     autocomplete = new google.maps.places.Autocomplete(input, options); 

    // sample array 
    $scope.testArray = [{ 
     name: 'item1' 
    }]; 

    // function to test a push into array 
    $scope.testPush = function() { 
     $scope.testArray.push({ 
      name: 'item2' 
     }); 
    } 

    // change listener for google input autocomplete 
    $scope.inputChanged = google.maps.event.addListener(autocomplete, 'place_changed', function() { 

     // set var as location 
     $scope.specificLocation = autocomplete.getPlace().formatted_address; 
     //alert($scope.specificLocation); 

     $.ajax({ 
      type: 'GET', 
      url: 'https://api.github.com/repos/bvasko/Bootstrap-Select-Box', 
      async: false, 
      contentType: "application/json", 
      dataType: 'jsonp', 

      success: function (data) { 
       alert(data); 
       $scope.testArray.push({ 
        name: $scope.specificLocation 
       }); 
      }, 

      error: function (e) { 
       console.log(e.message); 
      } 


     }); // end ajax call 



    }); 


} 

Как вы можете видеть пример кнопка работает как и ожидалось, при нажатии на нее, она толкает новый элемент в массив и нг-повтор обновляется. Но как только вы вводите местоположение в поле ввода и массив обновляется, новый элемент вводится в массив, но элементы ng-repeat - нет. Мне нужно обновить элементы ng-repeat, как только пользователь войдет в местоположение.

Я попытался использовать $ ur вместо $ ajax, но я также попытался использовать $ apply, ни один из которых не работал. Я чувствую, что мне не хватает чего-то простого, просто не знаю, что.

Answer 1

Использование $.ajax и $apply не является угловой путь. Вы должны вызвать апи с $http, как вы пробовали:

$http.jsonp('https://api.github.com/repos/bvasko/Bootstrap-Select-Box?callback=JSON_CALLBACK') 
    .then(function (response) { 
     $scope.testArray.push({ 
      name: $scope.specificLocation 
     }); 
    }); 

См your updated fiddle

Answer 2

Try:

$scope.$apply(); 

после вставки объекта в массив.

Из документации:

«$ применяется() используется для выполнения выражения в угловой из-за пределов угловой структуры (например из браузера DOM событий, SetTimeout, XHR или сторонних библиотек) Потому.. мы вызываем в угловую структуру, в которой нам нужно выполнить правильный жизненный цикл обработки исключительных ситуаций, выполняя часы ».

https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope # $ применять

JSFiddle: http://jsfiddle.net/yn0u67fo/