Search code examples
angularjstwitter-bootstrapangularjs-ng-repeatpopover

ng-repeat passes only first element to the function

I have following code in my app: 

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

I'm using an angular directive to show the popover which contains social sharing options. Directive is as follows: 

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

All of the data in array displays properly as is supposed to be with ng-repeat. But, when I click on the Facebook share button, it only sends the first element of the array to the function "share". If I don't use popover, it works fine. Any help on this would be really kind.

Edit: Array object added 

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

Solution

  • You can find the working version of your code below here. Are you missing to add ng-app="app" or ng-controller="myController" elements?

    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>