AngularJS視圖不能更新

這是配置文件config.js：AngularJS視圖不能更新

.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">。

當阿賈克斯成功：

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

當我要求我的空間和第一次出現的結果是尋呼機點擊即使確定。但是當我單擊rightside.html中的搜索按鈕時，即使ajax響應也會導致view（mypage.html）不會更新。

我錯了什麼？如何在模型發生變化時更新視圖？

編輯： 這是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) 
      } 
     )); 
    } 
}]);

來源

2015-10-05 Zeyar Phyo Maung

你在用什麼'$ http'或'$ .ajax'？ – Satpal

我使用'$ http'。 –

從你在你的問題描述一下，問題似乎是，你在同一個控制器的兩個實例。一是這裏

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

創建另一種是在的mypage.html文件創建。

由於mypage.html上的控制器正在工作並且信息正在被拉取和顯示，因此您在加載時看到了正確的行爲。

但是當你點擊按鈕時，更新的控制器（或更精確地說是作用域）就是右側的控件（沒有數據顯示），所以你仍然可以看到mypage.html中的數據

在這種情況下解決您的問題相當簡單。只需刪除兩個控制器聲明並在通用頁面的section元素中重新聲明您的控制器。你會得到正確的行爲。

來源

2015-10-06 05:48:14

這是工作:)謝謝@卡洛斯G. –

很高興它幫助。如果你發現它有用，你能否給出答案upvote？ –

我不能投票，因爲我的聲望不夠： –

試試這個：

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

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

這可以確保在$範圍應用週期AJA後運行X調用已完成，以便更新反映在DOM中。

來源

2015-10-05 12:33:55 jsNovice

'if'條件總是'false'且靜止視圖沒有改變。 –

是的，這不是簡單的執行。這只是角度更新週期不運行時的後備案例。有了它，它始終是完全保護的，但Angular處理它，它也會在視圖中更新。如果它仍然不起作用，你能否公開一些更多的代碼。這對我們倆都會有很大的幫助。 – jsNovice

它看起來像你的搜索方法mypageService沒有返回一個承諾，但這是你期望在你的控制器mypageCtrl。因此，successcallback實際上並未執行。我建議改變這個方法返回一個承諾是這樣的：

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

來源

2015-10-06 05:14:06

AngularJS視圖不能更新

回答

相關問題