javascript - AngularJS 在刷新之前不会更新 View ？

Question

我目前面临一个与 View 有关的问题。我正在制作一个应用程序，允许用户创建民意调查。当用户创建的民意调查被提交时，我调用 POST 路由来存储它:

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

本质上，我获取用户信息，并使用他的 ID 将新的民意调查存储在名为 polls 的模式定义值中。

现在，当用户单击按钮时，我会显示通过 ng-view 创建的民意调查:

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

        $scope.button = true;
     };

在 html 中，我只是迭代 $scope.userVal2。当我尝试查看新创建的民意调查时，我的问题出现了。民意调查最初不会显示，但如果我刷新页面，它就会显示。这有什么原因吗？这与异步调用有关吗？

如有任何帮助，我们将不胜感激!

编辑:

Controller :

'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)并且它不是静态内容，那么您将必须使缓存无效才能更新 View 。

3. 考虑让后端从 $http.post('/api/users/update' ...) 返回新的民意调查，并将其添加到 使用的列表中ng-重复。像这样的东西:

   $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>