Question

我的应用程序中有以下代码：

<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>

我正在使用angular指令来显示包含社交共享选项的popover。指令如下：

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分享按钮时，它只将数组的第一个元素发送到“共享”功能。如果我不使用popover，它工作正常。对此的任何帮助都会非常友好。

编辑：添加了数组对象

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

Answer 1

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

＆＃13;

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();
      });
   }
});

＆＃13;

<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>

＆＃13;

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

1 个答案: