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

Question

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

<!-- 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上面的例子中设置这里

**更新**我在不使用ng-view情况下尝试了相同的代码，并且该代码完全按预期工作。 因此，我确定遇到的问题与ng-view使用有关。 此处显示不使用ng-view Pnkr设置示例

Answer 1

您的代码（几乎）是正确的。

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

在Angular中，如果要具有<a>元素，其样式类似于<a> ，但默认情况下单击时不执行任何操作，请使用href="" 。

Answer 2

确定什么是真正发生的事情是与# HREF不被阻止点击默认值，因为所代表的路线图是清爽#本身并不存在

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

解决它的几种方法是：

• 删除href并设置css cursor:pointer如果您希望它响应相同的内容
• 保持href不变，并将$event作为参数传递给函数，然后使用$event.preventDefault()
• 将href更改为空字符串

这是没有href的工作版本

顺便说一下，这都是在角度范围内的，因为您使用的是ng-click ...这不是外部事件