Это конфигурационный файл 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)
}
) );
}
}]);
Из того, что вы описали в своем вопросе, проблема состоит в том, что у вас есть два экземпляра одного и того же контроллера. Здесь создается одно
<aside id="rightside" data-ng-include src="'views/template/rightside.html'" data-ng-controller="mypageCtrl"></aside>
Другой файл создается в файле mypage.html.
Вы видите правильное поведение при загрузке, потому что контроллер на mypage.html работает, и поэтому информация извлекается и отображается.
Но когда вы нажимаете на кнопку в правой части контроллера (или, более точно, область), который получает обновление, это тот, который на правах (который не имеет отображения данных), поэтому вы все еще видите данные в mypage.html
Решение вашей проблемы в этом случае довольно просто. Просто удалите объявления обоих контроллеров и обновите свой контроллер в элементе раздела на общей странице. Вы получите правильное поведение.
Похоже, ваш метод поиска в mypageService
не возвращает обещание, но это то, что вы ожидаете от своего контроллера mypageCtrl
. Следовательно, successcallback
фактически не выполняется. Я бы предложил изменить этот метод, чтобы вернуть такое обещание:
function search(conditions) {
return $http.post(BASE_URL + "/search", conditions);
}
Попробуй это:
function (data) {
$scope.results = data.results;
$scope.pagination = data._meta.pagination;
updateScope();
}
function updateScope(){
if(!$scope.$$phase){
$scope.$apply();
}
}
Это гарантирует, что прикладная программа $ scope применяет цикл после завершения вызова AJAX, так что обновление отражается в DOM.
if
условие всегда false
и все еще вид не изменился.
$http
или$.ajax
?$http
.