Question

所以我在displayCtrl中遇到了ng-repeat的问题。我可以按照预期在ajax调用上向$ scope.votes数组中添加对象，但是视图中没有自动更新。思考？这是我的剧本：

var glassCongress = angular.module('glassCongress', []).run(function($rootScope){
  $rootScope.votes = [];
}).controller('searchCtrl', function($scope, $rootScope, $http){
  $(document).ready(function() {
    $('#sendstuff').on('submit',function(event) {
      event.preventDefault();
      $.ajax({
        url: '/search/' + $('#input').val(),
        type: 'GET',
    dataType: 'json'
      }).done(function(data){
        for(var voteIndex = 0; voteIndex < data.data.length; voteIndex++){
          $rootscope.votes.push({
            "voteValue": (data.data[voteIndex].option.value)
          })
        }
      })
    })
  })
 }).controller('displayCtrl', function($scope, $rootScope){

 })

这是我的HTML：

<html ng-app="glassCongress">
<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js">    </script>
  <script src="script.js"></script>
</head>
<body>
  <div id="search" ng-controller = "searchCtrl">
<div>
  <form id='sendstuff' action='senddata' method='get'>
    <input id='input' type='text'/>
    <input type="submit" value="Submit" />
  </form>
</div>
</div>
  <div id="display" ng-controller = "displayCtrl">
  <div>
     <ul>
       <li ng-repeat="vote in votes"><span>{{vote}}</span></li>
    </ul>
  </div>
</div>
</body>
</html>

谢谢你们！

Answer 1

$ .ajax调用用完了angularjs范围。因此，anglarjs不会自动更新视图。

有两种可能的解决方案。

1 - 使用$http模块。您可以通过$ http调用替换$ .ajax调用。阅读文档以获取更多信息。

2 - 在ajax回调中更改模型后，调用方法$acope.apply()强制angularjs更新您的视图。

插入使用$ rootScope，你应该使用$ scope。

跨控制器的角度范围问题，而不是自动更新视图

1 个答案: