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（）的调用返回新数据。
ng-view已缓存。最初请求模板时，它会存储在$templateCache中。如果此模板在后端呈现以便作为部分显示（例如：ng-view）并且它不是静态内容，则您必须使缓存无效以更新视图。

考虑让后端从$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在刷新之前不会更新视图？

1 个答案: