AngularJS不會更新視圖，直到刷新？

Question

我目前正面臨一個問題，這與觀點有關。我正在製作一個應用程序，允許用戶創建民意調查。當一個用戶創建提交投票，我稱之爲POST路徑來存儲它：

$scope.userVal = Auth.getCurrentUser(); 
$http.post('/api/users/update' + $scope.userVal._id, {polls: $scope.polls}).success(function(res){ 
      //console.log("res: ", res); 
     }); 

從本質上講，我得到的用戶信息，並用他的身份證到新的投票存儲在名爲架構定義的值民意調查。

現在，當用戶點擊一個按鈕，我顯示通過NG-視圖中創建的民意調查：

$scope.pollView= function(){ 
     $scope.userVal2 = Auth.getCurrentUser(); 
     $scope.userVal2 = $scope.userVal2.polls; 

     $scope.button = true; 
    }; 

在HTML，我只是遍歷$ scope.userVal2。我試圖查看新創建的民意調查時出現問題。投票最初不會顯示，但如果我刷新頁面，則會顯示。這有什麼理由嗎？這是否與異步調用有關？

任何幫助，將不勝感激！

編輯：

控制器：

'use strict'; 

angular.module('voteApp') 
    .controller('WallCtrl', function ($scope, $http, Auth) { 
    $scope.items = []; 
    $scope.title; 

    $scope.button = false; //set default to the new poll 

    $scope.polls = []; 

    $scope.items.push({id:1, upvotes:0, text:""}); 
    $scope.items.push({id:2, upvotes:0, text:""}); 

    $scope.addOptions = function(){ 
     $scope.items.push({id:$scope.items.length +1, upvotes:0, text:""}); 
    }; 

    $scope.process = function(name, values){ 
     $scope.polls.push({title:name, options:values}); 
     $scope.title = ""; //reset the values for the next poll 
     $scope.items = []; 
     $scope.items.push({id:1, upvotes:0, text:""}); 
     $scope.items.push({id:2, upvotes:0, text:""}); 

     $scope.userVal = Auth.getCurrentUser(); 
     $http.post('/api/users/update' + $scope.userVal._id, {polls: $scope.polls}).success(function(res){ 
      //console.log("res: ", res); 
     }); 
    }; 

    $scope.newView= function(){ 
     $scope.button = false; 
    }; 

    $scope.pollView= function(){ 
     $scope.userVal2 = Auth.getCurrentUser().polls 

     $scope.button = true; 
    }; 

    $scope.delete = function(val){ 
     $scope.polls = $scope.polls.filter(function(returnableObjects){ 
       return returnableObjects.title !== val.title; 
     }); 
    }; 
    }); 

HTML：

<div ng-include="'components/navbar/navbar.html'"></div> 

<header class="hero-unit" id="banner"> 
    <div class="container"> 
    <h1>Dashboard</h1> 
    <p class="lead">What would you like to do today?</p> 
    <button ng-click="newView()" type="button" class="btn btn-lg newpoll">New Poll</button> 
    <button ng-click="pollView()"type="button" class="btn btn-lg mypolls">My Polls</button> 
    </div> 
</header> 

<div ng-show= "!button"> 
    <form name="form" ng-submit="process(title, items)"> 
    <h2 class="col-md-12 text-center">New Poll</h1> 
    <h5 class="col-md-12 text-center">Name your poll.</h1> 
    <input name="pollname" ng-model="title"type="text" class="form-control input_width" placeholder="Poll Name" required> 
    <br> 
    <h5 class="col-md-12 text-center">Options</h1> 
    <div ng-repeat="item in items"> 
     <p> 
      <input name = "{{item.id}}" ng-model="item.text" type="text" class="form-control input_width" placeholder="Option {{item.id}}" required> 
     </p> 
    </div> 
    <br> 
    <div class="text-center"> 
     <button type="button"ng-click="addOptions()" class="btn options" formnovalidate>More Options</button> 
    </div> 
    <br> 
    <div class="text-center"> 
     <button type="submit" class="btn button" validate>Submit</button> 
    </div> 
    </form> 
</div> 

<div ng-show="button" > 
    <br> 
    <div ng-repeat="poll in userVal2"> 
     <div class="polldeco"> 
      {{poll[0].title}} 
      <button class="btn buttondeco" ng-click="delete(poll)">Delete</button> 
     </div> 
    </div> 
</div> 

Answer 1

一些想法：

1. $scope.userVal2 = Auth.getCurrentUser().polls使用之前創建一個新的舊版本輪詢？也許這可以更改爲像Auth.getCurrentUser().then(...)。無論哪種方式，請確保對getCurrentUser（）的調用正在返回新數據。
2. ng-view被高速緩存。最初請求模板時，它將存儲在$templateCache中。如果此模板在後端呈現以便以部分形式顯示（例如：ng-view）並且它不是靜態內容，則必須使緩存無效以更新視圖。

3. 考慮讓後端從$http.post('/api/users/update' ...)返回新的輪詢並將其添加到ng-repeat使用的列表中。喜歡的東西：

   $scope.process = function(name, values) { 
   
       $scope.polls.push({title:name, options:values}); 
       ... 
       $http.post('/api/users/update' + $scope.userVal._id, {polls: $scope.polls}).success(function(poll){ 
        $scope.polls.push(poll); 
       }); 
   }; 
   

   ...

   <div ng-repeat="poll in polls"> 
       <div class="polldeco"> 
        {{poll[0].title}} 
        <button class="btn buttondeco" ng-click="delete(poll)">Delete</button> 
       </div> 
   </div>