Привязка данных не работает - AngularJS - PullRequest
Новая
       6

Привязка данных не работает - AngularJS

0 голосов
/ 20 мая 2018

Почему-то я не могу отобразить данные из моего бэкэнда в компоненте.Регистрация в журнале response.data дает мне мои данные.Я помещаю это в переменную movie в пределах видимости, но это не связывает.Вот код:

ФАЙЛ INDEX.HTML 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Movies - AngularJS</title>

    <!-- Styles -->
    <link rel="stylesheet" href="style.css">

    <!-- Scripts -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl" id="app">²
        <div class="box" ng-repeat="movie in movies">
            <h2 ng-class="movie.genre">{{ movie.genre }}</h2>
            <h1>{{ movie.title }}</h1>
            <p>Change the values of the movie.</p>
            <input ng-change="onChange" ng-model="movie.title" type="text">
            <input ng-change="onChange" ng-model="movie.genre" type="text">
        </div>
    </div>  
    <script src="main.js"></script>
</body>
</html>

MAIN.JS FILE 

const app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
    axios.get(`http://localhost:3001/api/movies`)
        .then(response => {
        $scope.movies = response.data;
        console.log($scope.movies); // logs the data correctly 
    })
    .catch(e => console.error(e.message));
});

Я думаю, что это как-то связано с Async / sync'nessно я не знаю, как это решить.Спасибо за помощь!:)

Ответы [ 4 ]

0 голосов
/ 21 мая 2018

Поскольку вы используете axios и заключаете в него свой угловой $scope, цикл дайджеста не может прочитать это изменение

Использовать угловой * $http вместо axios

ИЛИ

Если вы хотите использовать axios, тогда вы можете использовать $scope.$apply и обернуть $scope.movies = response.data;внутри него.

как 

$scope.$apply(function () {
                   $scope.movies = response.data;
            });
0 голосов
/ 20 мая 2018

Я не вижу каких-либо проблем с вашим кодом, возможно, вам нужно вручную форсировать рендеринг, используя $scope.$apply();

$scope.movies = response.data;
$scope.$apply();
0 голосов
/ 20 мая 2018

Используйте угловой $http вместо axios для выполнения ваших запросов, поскольку он будет внутренне вызывать дайджест представления при обновлении области действия в обратных вызовах

Каждый раз, когда вы используете код вне углового контекста для обновления области, которую вынеобходимо указать angular для запуска дайджеста

Также удалит axios как ненужную зависимость для загрузки страницы, так как $http уже существует в ядре angularjs

0 голосов
/ 20 мая 2018

Вам необходимо сообщить angularjs об обновлении - позвоните 

$scope.evalAsync();

после установки данных

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...