Question

我一直坚持使用Angular指令而不是使用ng-repeat。

要求是悬停文本，应该出现一个弹出窗口。弹出窗口有一个链接，当用户单击它在新标签页中打开的链接时。

我创建了一个带有链接的popover，并在新标签中打开。但是当与ng-repeat一起使用popover时，它仅适用于第一条记录，而不适用于任何其他记录。

我正在发布我遇到问题的代码。

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

    }
}
});

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

        }
    }
});

带有bootstrap popover的Angular Directive在ng-repeat中不起作用

1 个答案: