Почему добавленные элементы в массив не отображаются (angularJs + ajax)?

Question

[Yaroslav Dusanyuk]

У меня есть массив строк, который с помощью angular отображается списком, но я не могу добавить в него строку с функции success ajax запроса. При добавлении с обычной функции все добавляется нормально.

Код контроллера:

function directoryController($scope) {
    function initialize() {
        $.ajax({
            url: '/api/directory/',
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                    alert(data[i].Name);
                    $scope.directories.push(data[i].Name); //Эти элементы не добавляются
                }
            },
            error: function (x, y, z) {
                alert(x + '\n' + y + '\n' + z);
            }
        });
    }

    function test() {
        $scope.directories.push("test"); //этот элемент добавлен успешно
    }
    $scope.currentDir = "";
    $scope.directories = ["..."];

    test();
    initialize();
}

Разметка:

<p class="currentDirectory"><span>Current directory: </span>{{currentDir == "" ? '[ROOT]' : currentDir}}</p>
    <span ng-model="currentDir"></span>
    <ul>
        <li ng-repeat="obj in directories">
            <p>{{obj}}</p>
        </li>
    </ul>

Результат:

Comments

[Alex]

А в консоли что? Запрос то выполняется вообще?

Answer 1

[Евгений]

А почему не используется ?
$http.get('...').success(function(response){})

Comments

[Николай]

вы используете устаревшую сигнатуру. Теперь $http возвращает Promise, и обрабатывать его нужно как промис. Т.е. $http().then(function() {} )

[Евгений]

Николай: спасибо, почитал

Answer 2

[Николай]

Проблема в том, что ангуляр не в курсе, какие асинхронные операции вы вытворяете и его нужно оповещать в таких случаях. Поэтому рекомендуется использовать сервисы предоставленные ангуляром, в данном случае $http или $resource. То же самое касается $timeout, директив для бинда DOM эвентов(ng-click например). Если какой-то сторонний метод возвращает ES Promise - то стоит обернуть его в $q.when().

Comments

[Yaroslav Dusanyuk]

Спасибо вам большое, уже все работает. Вот так сделал:

$http({ method: 'GET', url: '/api/directory' }).then(function (data) {
data.data.forEach(function (element, index) {
$scope.directories.push(element.Name);
});
});