ngRepeat Inside of Bootstrap Popover

Question

Szukałem w sieci i męczyłem mózg, ale nie mogę znaleźć rozwiązania tego problemu. Muszę zrobić popover wewnątrz powtórzenia ng, w którym popover również będzie zawierało powtórzenie ng wewnątrz.

Oto JSFiddle mam tak daleko, ale z ng-repeat "phone.friends" nie działa:

http://jsfiddle.net/grzesir/Lq8ve/4/

HTML:

<div ng-app="AngularApp"> 
<div class="container" ng-controller="MainController"> 
    <div ng-repeat="phone in phones"> 

     {{phone.name}} 
     <a href="javascript: void(0);" class='repeatpopover' data-popover="true" data-html=true data-content="<div ng-repeat='friend in phone.friends'>{{friend.name}}</div>">hover here</a> 

    </div> 
</div> 

Javascript :

var angularApp = angular.module('AngularApp', []); 

angularApp.controller('MainController', function ($scope) { 
    $scope.phones = [{ 
     'name': 'Nexus S', 
      'snippet': 'Fast just got faster with Nexus S.', 
      'friends': [{ 
      'name': 'John' 
     }, { 
      'name': 'Mike' 
     }] 
    }, { 
     'name': 'Motorola XOOM™ with Wi-Fi', 
      'snippet': 'The Next, Next Generation tablet.', 
      'friends': [{ 
      'name': 'John 2' 
     }, { 
      'name': 'Mike 2' 
     }] 
    }, { 
     'name': 'MOTOROLA XOOM™', 
      'snippet': 'The Next, Next Generation tablet.', 
      'friends': [{ 
      'name': 'Chris' 
     }, { 
      'name': 'Noah' 
     }] 
    }]; 
}); 

$(function() { 
    $(".repeatpopover").popover({ 
     trigger: "hover" 
    }); 
}); 

Answer 1

Zaktualizowałem twoje skrzypce do rozwiązania za pomocą filtra.

Dodaj:

angularApp.filter('friendsHTML', function() { 
    return function(input) { 
     var html = ''; 
     for (idx in input) { 
      html += '<div>' + input[idx].name + '</div>'; 
     } 
     return html; 
    }; 
}); 

I wtedy w szablonie dla parametru data-content prostu zrobić data-content="{{ phone.friends | friendsHTML }}". Prawdopodobnie może się to jednak stać bardziej ogólne/wielokrotnego użytku.

This może być warty również zaglądania. Mam nadzieję, że pomaga!

Answer 2

W przypadku gdy ktoś jest zainteresowany, tutaj jest JS Fiddle z jego pracy:

http://jsfiddle.net/grzesir/TZ72k/2/

Javascript:

var angularApp = angular.module("bootstrap", []); 

angularApp.controller('MainController', function ($scope) { 
    $scope.phones = [{ 
     'name': 'Nexus S', 
      'snippet': 'Fast just got faster with Nexus S.', 
      'friends': [{ 
      'name': 'John' 
     }, { 
      'name': 'Mike' 
     }] 
    }, { 
     'name': 'Motorola XOOM™ with Wi-Fi', 
      'snippet': 'The Next, Next Generation tablet.', 
      'friends': [{ 
      'name': 'John 2' 
     }, { 
      'name': 'Mike 2' 
     }] 
    }, { 
     'name': 'MOTOROLA XOOM™', 
      'snippet': 'The Next, Next Generation tablet.', 
      'friends': [{ 
      'name': 'Chris' 
     }, { 
      'name': 'Noah' 
     }] 
    }]; 
}); 

angularApp.directive('popOver', function ($compile, $templateCache) { 
     var getTemplate = function() { 
      $templateCache.put('templateId.html', 'This is the content of the template'); 
      console.log($templateCache.get("popover_template.html")); 
      return $templateCache.get("popover_template.html"); 
     } 
     return { 
      restrict: "A", 
      transclude: true, 
      template: "<span ng-transclude></span>", 
      link: function (scope, element, attrs) { 
       var popOverContent; 
       if (scope.friends) { 
        var html = getTemplate(); 
        popOverContent = $compile(html)(scope);      
        var options = { 
         content: popOverContent, 
         placement: "bottom", 
         html: true, 
         title: scope.title 
        }; 
        $(element).popover(options); 
       } 
      }, 
      scope: { 
       friends: '=', 
       title: '@' 
      } 
     }; 
    }); 

HTML:

<div ng-app="bootstrap" id="example" ng-init="items = ['car', 'truck', 'plane', 'bike']"> 
    <div ng-controller="MainController"> 
     <div ng-repeat="phone in phones"> 
      <a href="#" pop-over friends="phone.friends", title="Mode of transport">Show Pop over</a> 
     </div> 
    </div> 
    <script type="text/ng-template" id="popover_template.html"> 
     <ul class='unstyled'><li ng-repeat='friend in friends'>{{friend.name}}</li></ul> 
    </script> 
</div>