帶有自舉popover的Angular指令不能在ng-repeat中工作

我一直被禁止在Angular指令中不工作的ng-repeat。帶有自舉popover的Angular指令不能在ng-repeat中工作

需要懸停的文本，應該出現彈出窗口。彈出窗口中有一個鏈接，當用戶單擊它在新選項卡中打開的鏈接時。

我創建了具有鏈接的彈出窗口，並在新選項卡中打開。但是當與ng一起使用時，重複彈出只能在第一條記錄上工作，而不在其他任何記錄上工作。

我發佈了我正在面對的問題的代碼。

HTML：

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

    } 
} 
});

來源

2017-09-15 Sumit

不知道爲什麼你正在使用jQuery，你爲什麼編譯模板等，但假設你正在尋找由彈出式內容標識的元素，並且假定ID在文檔中應該是唯一的，那麼這可能無法工作。爲什麼不使用支持彈出的angular-ui-bootstrap？ –

使用角度ui引導彈出框 – Rahul

@JB Nizet，@ Rahul - 我已經嘗試了angular-ui-bootstrap，它有3種風格，我有uib-popover，uib-popover-html，uib-popover-template。但是我需要在popover內容中有一個鏈接，可以在新標籤中打開。 – Sumit

試試這個

.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'); 
      } 

     } 
    } 
});

來源

2017-09-15 18:54:43 yesIcan

帶有自舉popover的Angular指令不能在ng-repeat中工作

回答

相關問題