ng-repeat 仅将第一个元素传递给函数答案

【问题标题】：ng-repeat passes only first element to the functionng-repeat 仅将第一个元素传递给函数
【发布时间】：2016-09-02 10:30:19
【问题描述】：

我的应用中有以下代码：

<li ng-repeat="data in array">
      <ul class="social-share">
        <li>
          <a href="" rel="popover" popover data-popover-content="#myPopover"><i class="fa fa-share-alt"></i>Share</a>
          <div id="myPopover" class="hide">
            <strong>Social Share</strong>
            <ul class="social-spacing">
              <li><a class="btn btn-primary share-button" title="" data-original-title="" href="" ng-click="share(data.translation)">Facebook</a></li>
            </ul>
          </div>
        </li>
      </ul>
      <p class="eng-translation">{{data.translation}}</p>
  </li>

我正在使用一个角度指令来显示包含社交分享选项的弹出框。指令如下：

myApp.directive('popover', function() {
   return function(scope, elem) {
      elem.popover({
          container: 'body',
          html: true,
          content: function () {
              var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
              return clone;
          }
      }).click(function(e) {
          e.preventDefault();
      });
   }
});

数组中的所有数据都可以正常显示，就像使用 ng-repeat 时一样。但是，当我单击 Facebook 分享按钮时，它只会将数组的第一个元素发送到函数“分享”。如果我不使用弹出框，它可以正常工作。对此的任何帮助都会非常友好。

编辑：添加数组对象

$scope.array = [
    {
      'translation': 'translation-1'
    },
    {
      'translation': 'translation-2'
    },
    {
      'translation': 'translation-3'
    },
    {
      'translation': 'translation-4'
    },
    {
      'translation': 'translation-5'
    },
    {
      'translation': 'translation-6'
    },
    {
      'translation': 'translation-7'
    }
  ];

【问题讨论】：

array 对象在哪里？
用array 对象@ojuskulkarni 更新了我的问题

标签： angularjs twitter-bootstrap ng-repeat popover

【解决方案1】：

您可以在下面找到您的代码的工作版本。是否缺少添加ng-app="app" 或ng-controller="myController" 元素？

var myApp = angular.module('app', []);

myApp.controller('myController', ['$scope', function($scope) {
  $scope.myArray = [
    {
      'translation': 'translation-1'
    },
    {
      'translation': 'translation-2'
    },
    {
      'translation': 'translation-3'
    },
    {
      'translation': 'translation-4'
    },
    {
      'translation': 'translation-5'
    },
    {
      'translation': 'translation-6'
    },
    {
      'translation': 'translation-7'
    }
  ];
  $scope.share = function($index) {
    alert($scope.myArray[$index].translation);
  };
}]);

myApp.directive('popover', function() {
   return function(scope, elem) {
      elem.popover({
          container: 'body',
          html: true,
          content: function () {
              var clone = elem.siblings('#myPopover').clone(true).removeClass('hide').css("display", "inherit");
              return clone;
          }
      }).click(function(e) {
          e.preventDefault();
      });
   }
});

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
  
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div ng-app="app">
<div ng-controller="myController">
  <li ng-repeat="myData in myArray">
      <ul class="social-share">
        <li>
          <a href="" rel="popover" popover><i class="fa fa-share-alt"></i>Share</a>
          <div id="myPopover" class="hide">
            <strong>Social Share</strong>
            <ul class="social-spacing">
              <li><a class="btn btn-primary share-button" title="" data-original-title="" href="" ng-click="share($index)">Facebook</a></li>
            </ul>
          </div>
        </li>
      </ul>
      <p class="eng-translation">{{myData.translation}}</p>
  </li>
</div>
</
</body>
</html>

【讨论】：

$index 也不起作用。它总是通过 0 索引。我已经指定了应用和控制器
当您在我的答案上点击“运行代码 sn-p”时，它可以完美运行，因此请调查我的代码，仔细应用您的代码并将我的答案标记为正确答案。
在我的回答中检查这一行： var clone = elem.siblings('#myPopover').clone(true).removeClass('hide').css("display", "inherit") ;.在您的代码中，您总是复制第一个元素 div，因为该弹出 div 的所有 id 都是相同的，并且您告诉您的代码获取具有该 id 的 div 并获取它找到的第一个。在我的代码中（我在我的评论开头粘贴了这里）它找到了具有该 ID 的“兄弟”，因此它总是找到正确的，仅在弹出窗口时使用。这就是为什么索引总是为 0 的原因。用我的线路更新你的线路。
非常感谢先生您救了我。很抱歉没有注意到指令的变化。