"Add more“指令加载

Question

在“添加更多”按钮中添加指令的正确方法是什么？我有一个呈现html的指令。当只是在templateUrl中使用它时，它工作得很好。现在，我想让用户通过“添加更多”按钮加载更多相同的指令。正确的做法是什么？

Answer 1

在你的作用域上有一个东西的数组和一个添加东西的函数：

$scope.things = [ { id: 1, name: 'thing 1' }, 
    { id: 2, name: 'thing 2' },
    { id: 3, name: 'thing 3' }
];

$scope.addThing = function(){
    $scope.things.push( { id: 4, 'thing 4' } );
}

在视图中，可以使用ngRepeat指令显示内容列表：

<my-directive ng-repeat='thing in things' thingy='thing'><my-directive>

以及用于添加更多内容的按钮：

<button type='button' ng-click='addThing()'>Add a thing</button>

Answer 2

像往常一样，我想我在发帖2分钟后找到了答案……这里是我的控制器

.controller('LatestMovementsCtrl', function($scope, $compile) {
   $scope.load_more = function() {
   var newElement = $compile( '<my-directive line="data1" class="balance_item_main"></my-directive>' )( $scope );
    jQuery('#load_more_data').append(newElement.hide().fadeIn(1000));
  }
})

如果有人有更好的解决方案，我很想听听。