ng-repeatで動作しないブートストラップポップアを使用する角度指令

Question

ng-repeatが動作しないAngularディレクティブに固執しました。

要件はテキストのホバー上にあり、ポップオーバーが表示されます。ポップオーバーにはリンクがあり、ユーザが新しいタブで開くリンクをクリックするとリンクが開きます。

リンクがあり、新しいタブで開くポップオーバーを作成しました。しかし、ng-repeatと一緒に使用された場合は、最初のレコードでのみ動作し、他のレコードでは動作しません。

私が問題に直面しているコードを投稿しています。

HTML：あなたはjQueryの、テンプレートをコンパイルしている理由、などしかし、を使用している理由

<div ng-repeat="x in records"> 
    <label>{{x.Name}}</label> 
    :::::::: 
    <label>{{x.Country}}</label> 
    <popup-directive></popup-directive> 
</div> 

Script.js

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

app.controller('myCtrl', function($scope) { 
$scope.records = [ 
    { 
     "Name" : "Sumit", 
     "Country" : "Germany" 
    },{ 
     "Name" : "Akki", 
     "Country" : "Sweden" 
    },{ 
     "Name" : "Ashwin", 
     "Country" : "Mexico" 
    },{ 
     "Name" : "Sid", 
     "Country" : "Austria" 
    } 
] 
}); 

var directives = angular.module('directives', []); 
directives.directive('popupDirective', function($compile,$window) { 
return { 
    restrict: 'EAC', 
    template: "<a id='pop-over-link''>Show pop-over</a>" + 
       "<div id='pop-over-content' style='display:none'><button  class='btn btn-primary' ng-click='testFunction()'>Ok</button></div>", 
    link: function(scope, elements, attrs) { 
     $("#pop-over-link").popover({ 
      'placement': 'bottom', 
      'trigger': 'hover focus', 
      'html': true, 
      'delay':{hide:5000}, 
      'content': function() { 
       return $compile($("#pop-over-content").html())(scope); 
      } 
     },1000); 

     scope.testFunction = function() { 
      $window.open('https://www.google.com','_blank'); 
     } 

    } 
} 
}); 

Answer 1

この

.directive('popupDirective', function ($compile, $window) { 
    return { 
     restrict: 'EAC', 
     template: "<a class='pop-over-link''>Show pop-over</a>" + 
        "<div id='pop-over-content' style='display:none'><button  class='btn btn-primary' ng-click='testFunction()'>Ok</button></div>", 
     link: function (scope, elements, attrs) { 
      $(".pop-over-link").popover({ 
       'placement': 'bottom', 
       'trigger': 'hover focus', 
       'html': true, 
       'delay': { hide: 5000 }, 
       'content': function() { 
        return $compile($("#pop-over-content").html())(scope); 
       } 
      }, 1000); 

      scope.testFunction = function() { 
       $window.open('https://www.google.com', '_blank'); 
      } 

     } 
    } 
});