Представление AngularJS не может обновляться при изменении модели

0

Это конфигурационный файл config.js:

.state ('home', {
    url: '/home',
    templateUrl: 'views/common.html'
})
.state ('home.mypage', {
    url: '/mypage',
    templateUrl: 'views/mypage.html'
})

Вот common.html:

<header id="header" data-ng-include src="'views/template/header.html'"></header>
<section id="main">
    <aside id="leftside" data-ng-include src="'views/template/leftside.html'"></aside>
    <aside id="rightside" data-ng-include src="'views/template/rightside.html'" data-ng-controller="mypageCtrl"></aside>
    <section id="content" class="page-view" data-ui-view></section>
</section> 
<footer id="footer" data-ng-include src="'views/template/footer.html'"></footer>

rightside.html содержит входы и кнопку поиска для вызовов api, а mypage.html содержит нечто вроде <div class="container ng-scope" data-ng-controller="mypageCtrl">.

Когда успех ajax:

function (data) {
    $scope.results = data.results;
    $scope.pagination = data._meta.pagination;
}

Когда я запрашиваю mypage, и сначала появляется результат, даже при нажатии на пейджер. Но когда я нажимаю кнопку поиска в rightide.html, view (mypage.html) не обновляется, даже результат ajax имеет результат.

Что я не так? Как обновить представление при изменении модели?

EDIT: Это mypageController.js

materialAdmin
    .controller('mypageCtrl', function($location, $scope, mypageService) {
        $scope.search = function(conditions) {
            return (mypageService.search(conditions).then(
                function (data) {
                    $scope.results = data.results;
                    $scope.pagination = data._meta.pagination;
                },
                function (error) {
                    console.log(error);
                }
            ) );
        };
        $scope.search($scope.conditions); // Initial search when request page
})

и mypageService.js

materialAdmin.service("mypageService", ['$http', '$q', function($http, $q) {
    return {
        search: search
        // and more functions
    };

    function search(conditions) {
        return ( $http.post(
            BASE_URL + "/search", conditions).then(
            handleSuccess,
            function (response) {
                handleError(response, $q)
            }
        ) );
    }
}]);
  • 0
    Что вы используете $http или $.ajax ?
  • 0
    Я использую $http .
Теги:

3 ответа

0
Лучший ответ

Из того, что вы описали в своем вопросе, проблема состоит в том, что у вас есть два экземпляра одного и того же контроллера. Здесь создается одно

    <aside id="rightside" data-ng-include src="'views/template/rightside.html'" data-ng-controller="mypageCtrl"></aside>

Другой файл создается в файле mypage.html.

Вы видите правильное поведение при загрузке, потому что контроллер на mypage.html работает, и поэтому информация извлекается и отображается.

Но когда вы нажимаете на кнопку в правой части контроллера (или, более точно, область), который получает обновление, это тот, который на правах (который не имеет отображения данных), поэтому вы все еще видите данные в mypage.html

Решение вашей проблемы в этом случае довольно просто. Просто удалите объявления обоих контроллеров и обновите свой контроллер в элементе раздела на общей странице. Вы получите правильное поведение.

  • 0
    Это работа :) Спасибо @ Carlos G.
  • 0
    Рад, что это помогло. Если вы нашли это полезным, не могли бы вы дать ответ upvote?
Показать ещё 1 комментарий
0

Похоже, ваш метод поиска в mypageService не возвращает обещание, но это то, что вы ожидаете от своего контроллера mypageCtrl. Следовательно, successcallback фактически не выполняется. Я бы предложил изменить этот метод, чтобы вернуть такое обещание:

function search(conditions) {
    return $http.post(BASE_URL + "/search", conditions);
}
0

Попробуй это:

function (data) {
    $scope.results = data.results;
    $scope.pagination = data._meta.pagination;
    updateScope();
}

function updateScope(){
    if(!$scope.$$phase){
        $scope.$apply();
    }
}

Это гарантирует, что прикладная программа $ scope применяет цикл после завершения вызова AJAX, так что обновление отражается в DOM.

  • 0
    if условие всегда false и все еще вид не изменился.
  • 0
    Да, это не должно быть выполнено просто. Это просто запасной вариант, когда цикл углового обновления не запускается. При этом он всегда полностью защищен, однако Angular обрабатывает его, он также будет обновляться в виде. Если это все еще не работает, пожалуйста, представьте немного больше кода. Это было бы очень полезно для нас обоих.

Ещё вопросы

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