i have following code in 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 angular directive show popover contains social sharing options. directive 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 data in array displays supposed ng-repeat. but, when click on facebook share button, sends first element of array function "share". if don't use popover, works fine. on 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' } ];
you can find working version of code below here. missing 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>
Comments
Post a Comment