AngularjJS не делает реального обновления страницы на входных данных в форму

0

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

вот мой контроллер:

app.controller('HomeController', [
    '$scope',
    '$http',
    'get_suggestions',
    function($scope, $http, get_suggestions) {

        $scope.addSuggestion = function() {

            var titlu = $scope.newsuggest.title;

            if (!titlu || titlu === "") {
                $scope.eroare = "Enter suggestion";
                return;
            } else {

                $http.post('add_sugestii.php', {
                        title: $scope.newsuggest.title
                    }).success(function(data, status, headers, config) {

                        $scope.posts.push({
                            title: titlu,
                            upvotes: 0,
                            comments: []
                        });

                        $scope.newsuggest.title = '';
                        $scope.eroare = '';
                        $scope.$apply();
                        $route.reload();

                    })
                    .error(function(data, status) {
                        $scope.errors.push(status);
                    });

            }
        }


        get_suggestions.success(function(data) {
            $scope.posts = data;
        });

    }
]);

и вот часть моей страницы просмотра:

    <div class="container">
    <div ng-repeat="post in posts | orderBy:'upvotes'" class="col-md-6" style="clear:both; padding-bottom:20px;">

        <p class="title">{{post.title}} </p>
        <p>Votes: {{post.upvotes}} </p>

    </div>
</div>

<div class="container">
    <div class="col-md-6" style="clear:both; padding-bottom:20px;">

        <form ng-submit="addSuggestion()" style="margin-top: 50px">
            <h3> Send a suggestion </h3>
            <div class="form-group">
                <input type="text" class="form-control" name="title" ng-model="newsuggest.title"></input>
                <div>{{eroare}}</div>
            </div>
            <button type="submit" ng-click="addSuggestion();" class="btn btn-primary">Send</button>
        </form>

    </div>
</div>
  • 0
    Привет Crina, Здесь вы удаляете запись из базы данных вручную, верно? затем проверьте ваш серверный код для извлечения данных из базы данных, использует ли он механизм кэширования, затем сначала очистите кэш, так как вы удаляете вручную из базы данных. Чтобы проверить проблему с кешем, обратитесь к своим данным json, которые вы получаете от API, они содержат удаленную запись или нет?
Теги:

2 ответа

1

Поскольку вы уже используете $route.reload(); поэтому логика для перезагрузки есть, проблема в том, что вы не ввели $route в свой контроллер. Вы получаете сообщение об ошибке в консоли браузера.

TypeError: Не удается прочитать свойство "перезагрузить" неопределенного

Кроме того, вам не нужно использовать $scope.$apply(); при перезагрузке.

app.controller('HomeController', [
    '$scope',
    '$http',
    'get_suggestions',
    '$route', //Inject the route service 
    function($scope,
        $http,
        get_suggestions,
        $route) {
    }
]);

ИЛИ

Используйте $window.location.reload(); , Не забудьте ввести $window в свой контроллер.

Поделиться
  • 0
    Привет, я вставил только $ route внутри функции, в противном случае вставленный дважды в мой контроллер, он вообще не работает, но все равно сообщение появляется дважды, и если я вручную удаляю первое сообщение после ввода второго, оно все равно появляется. Здесь вы можете увидеть поведение: projectangular1.impromedia.ro
  • 0
    @CrinaDeac, см. Как открыть консоль JavaScript в разных браузерах? и сообщать, если вы получаете какую-либо ошибку в консоли
Показать ещё 3 комментария
0

  1. Ввести $ Маршрут.

  2. Посмотри на это

    $scope.posts.push({
                        title: title,
                        upvotes: 0,
                        comments: []
                 });

Q Что он делает?

У вас есть $ scope, называемый сообщениями, связанными с вашим пользовательским интерфейсом. Поэтому, когда вы вставляете какие-либо данные, он подключается к пользовательскому интерфейсу, поэтому он будет видимым для конечного пользователя, если обновление не происходит.

Я могу предложить вам два разных способа.

  1. удалите этот код, как указано выше. Теперь $ route.reload(); приведет к обновлению страницы. поэтому, когда страница обновляется, убедитесь, что ваш API возвращает json из заголовков. Привяжите его переменной $ scope.posts (можно использовать где-нибудь в методе углового init).

  2. Я надеюсь, что у вас есть метод init, подобный этому.

      $scope.pageInit=function(){
  // your API call to get data.
  //after getting a json list of title make sure you bind it to    $scope.posts variable.
   $scope.posts=titlesObj;
}

Теперь вместо того, чтобы использовать $ route.reload(), вам нужно вызвать функцию $ scope.pageInit, чтобы получить обновленные данные.

       $scope.newsuggest.title = '';
       $scope.eroare = '';
       $scope.$apply();
       // $route.reload();
       $scope.pageInit(); // this will fetch all updated data.
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню