javascript - 仅将此元素用于多个元素中的 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"它将模板注入(inject)到新创建的 <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());
};