Question

我对AngularJS ng-view和ng-repeat存在问题，我认为这与我处理scope的方式有关。我使用ng-repeat来显示数组中存在的项目列表。并且ng-repeat上scope ng-click之外的按钮会更新数组。但有些我无法使这个功能正常工作。以下是我的代码示例：

<!-- home.html partial -->
<h1>Home view</h1>
<div>
  <ul ng-repeat="p in posts.data">
    <li>{{p.title}}</li>
  </ul>
  <a href="#" ng-click="updatePosts(5)">More</a>
</div>

以下是绑定到此部分文件的控制器：

var app = angular.module('plunker', ['ngRoute']);
app.config(function($routeProvider){
  $routeProvider
    .when('/', {
      controller: 'testController',
      templateUrl: 'home.html'
    })
    .otherwise({ redirectTo: '/' });
});

app.controller('testController', 
  [
    '$scope', 
    function ($scope) 
    {
      $scope.posts = {
        data : []
      };
      $scope.getPosts = function(count)
      {
        for(i =0; i<count; ++i)
        {
          $scope.posts.data.push({title : "Title-"+i})
        }
      }
      $scope.updatePosts = function(count)
      {
        var offset = $scope.posts.data.length;
        var data = [];
        for(i =offset; i<offset+count; ++i)
        {
          data.push({title : "Title-"+i});
        }
        $scope.posts.data = $scope.posts.data.concat(data)
      }
      $scope.getPosts(5);
    }
  ]
);

我想要的功能是当点击主页面上的“更多”链接时，控制器应获得少量代码片段并使用更多数据更新视图。例如，我希望视图在单击“更多”时从（1）转到（2）。但无论如何，我总是以（1）结束。

（1）

主页视图

标题-0
标题-1
标题-2
标题-3
标题-4

更多

（2）

主页视图

标题-0
标题-1
标题-2
标题-3
标题-4
标题-5
标题-6
标题-7
标题-8
标题-9

更多

我在Plnkr here

中也有上面的示例设置

**更新** 我在不使用ng-view的情况下尝试了相同的代码，代码完全按预期工作。所以我确信我遇到的问题与我对ng-view的使用有关。不使用ng-view的Pnkr设置中的示例显示为here

Answer 1

您的代码（几乎）正确无误。

唯一的问题是<a href="#" ...导致重定向到默认视图，从而重新实例化控制器（并将帖子数重置为5）。

在Angular中，如果您希望<a>元素的样式设置为<a>，但默认情况下不执行任何操作，请使用href=""。

Answer 2

确实实际发生的事情是使用# href没有阻止点击默认值并且视图正在刷新，因为仅由#表示的路线不存在

您可以通过从getPosts功能登录到控制台来证明这一点。

围绕它的几种方法是：

如果您希望它响应相同的

cursor:pointer

保持href原样并将$event作为参数传递给函数并使用$event.preventDefault()
将href更改为空字符串

<强> Here's a working version without href

顺便说一下，因为你使用的是ng-click，所以这都是有角度的...它不是一个外部事件

如何在angularjs中从外部追加ng-repeat范围中的数据？

2 个答案: