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);
        });

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

现在，当用户单击按钮时，我会显示通过 ng-view 创建的投票：

$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

一些想法：

$scope.userVal2 = Auth.getCurrentUser().polls 是否在创建新投票之前使用旧版本？也许这可以更改为类似 Auth.getCurrentUser().then(...) 的内容。无论哪种方式，请确保对 getCurrentUser() 的调用是 returning 新数据。
ng-view 被缓存。当最初请求模板时，它会存储在 $templateCache 中。如果此模板在后端呈现以作为部分（例如：ng-view）显示并且它不是静态内容，那么您将不得不使缓存无效以更新视图。

考虑让后端 return 来自 $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>

AngularJS 直到刷新才更新视图？

AngularJS doesn't update view until refresh?

javascript

node.js

angularjs

mean-stack