仅在多个元素中使用此元素进行 ng-click

Question

我使用这个 html 代码渲染出几个容器元素。 ng-repeat="card in cards" 元素实际上并没有被渲染，因为没有 $scope.cards;

<div id="container" ng-controller='DemoController'>
  <div ng-repeat = "movie in movies" class="repeat">

    <a ng-click="addMovie()" ui-sref=".container-big" >More info</a>
    <div ng-repeat="card in cards" my-card="card"></div>

  </div>
</div>

如果用户点击a，它会触发addMovie() 函数，

$scope.addMovie = function() {
    $scope.cards.push(new Card());
};

这反过来创建了一张新卡片，因为现在有一张卡片 <div ng-repeat="card in cards" my-card="card"></div> 在 .repeat 元素中创建。

上述元素有一个名为my-card="card" 的指令。因此，当创建元素时，它也会触发指令

angular.module('myApp').directive('myCard', function(){
    return {
        restrict: 'A',
        template: '<div ui-view="container-big"></div>',
        replace: true,
        transclude: false
    };
});

替换这个元素

<div ng-repeat="card in cards" my-card="card"></div>

用这个元素

<div ui-view="container-big"></div>

a 也有一个ui-sref=".container-big"，它将一个模板注入到新创建的<div ui-view="container-big"></div>。

在这里查看它的实际应用 > http://plnkr.co/edit/B7CRjvdQ9paytwl5csKi?p=preview

我的问题是，我可以限制点击动作

 <a ng-click="addMovie()" ui-sref=".container-big" >More info</a>

只到被点击的元素。因此，不要在所有元素上触发所有 addMovie() 函数。我只在点击的元素上触发它，导致只有一个容器发生变化。

Answer 1

您需要为每部电影设置一个单独的卡片数组。一种方法是使cards 成为movie 的属性。

在 HTML 中，我们将其修改为将 movie 传递给 addCard()。在这种情况下，movie 是 ng-repeat 正在迭代的当前电影。没有这个，addCard() 函数就不会知道它应该向哪部电影添加卡片。我们还将第二个 ng-repeat 更改为使用 movie.cards，以便它知道只查看与该电影有关的卡片。

<div ng-repeat = "movie in movies" class="repeat">
  <a ng-click="addCard(movie)" ui-sref=".container-big" >More info</a>
  <div ng-repeat="card in movie.cards" my-card="card"></div>
</div>

在 JavaScript 中，我们修改了 addCard() 函数，使其将 movie 作为参数。我们还需要对其进行更改，以便它为该电影创建一个存储卡片的地方

$scope.addCard = function(movie) {
    // create movie.cards array if it does not exist
    if (!movie.cards) {
      movie.cards = [];
    }
    // add the card to the list of cards for this movie
    movie.cards.push(new Card());
};