Angularjs没有为Bootstrap Popover插入标题

你可以让它工作，但它很难看，这是我的解决方案

var app = angular.module('app', []);
app.controller('Main', ['$scope', function($scope){
    $scope.items = [        
        { title: 'Title 1', data: 'Test in ngRepeat' },
        { title: 'Title 2', data: 'Test in ngRepeat' },
    ];
}]);
app.directive('initPopover', function() {
  return function(scope, element, attrs) {
      if (scope.$last) {
      attrs.$observe('title', function () {
          $('[data-toggle="popover"]').popover({container: 'ul'});
      });
      }
  };
});

您不应该使用title="{{i.title}}"，但ng-attr-title="{{i.title}}"。。。

我也遇到了同样的问题。我使用的是bootstrap v3.3.6和Angular v1.5.0

添加属性数据original title="｛｛someTitle｝｝"解决了此问题。

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="{{someTitle}}" data-original-title="{{someTitle}}" data-content="Some Content">Click to toggle popover</button>

此外，根据引导程序的要求，在指令中调用.popover（）

module.directive('myDir', ['jQuery', function (jQuery) {
    return {
        link: function () {
            jQuery('[data-toggle="popover"]').popover();
        }
    };
}]);

将$timeout添加到指令将解决您的问题。$timeout将在ng的最后一个元素在UI&运行CCD_ 4循环。

指令

app.directive('initPopover', function($timeout) {
    return function(scope, element, attrs) {
        if (scope.$last) {
            $timeout(function() {
                angular.element('[data-toggle="popover"]').popover({
                    container: 'ul'
                });
            });
        }
    };
});

工作Fiddle

希望这能对你有所帮助。谢谢

考虑将ui引导程序用于原生Angular指令，而不是bootstrap的jQuery版本。在Angular项目中使用它们要容易得多。

编辑：如果你做不到，这里有一个解决方案：

<li ng-repeat="i in items" data-toggle="popover" data-ng-attr-popover_title="{{ i.title }}" 
            data-content="Popover Content"
            init-popover>{{ i.data }}</li>

对指令做了一个小改动：

app.directive('initPopover', function() {
  return function(scope, element, attrs) {
    if (scope.$last){
        $('[data-toggle="popover"]').popover({ container: 'ul', title: attrs.popoverTitle });
    }
  };

ng-attr-popup_title将在元素上创建一个名为popupTitle的HTML属性，并正确解析{{}}中的Angular语法。然后，在指令中，我们可以检查该属性来设置popover标题。

Fiddle：此处

只是添加到这里的知识库中。这是棱角分明的方式，以防有人需要。我的解决方案基于Mark Coleman的PopOver教程，当然还有Nate Barbettini的贡献。

我的情况是，我在项目中的项目上有一个嵌套的ng重复，所以我需要有一个基于存储在范围中的数组的弹出窗口的标题，而弹出窗口的内容来自存储在范围的数组中的另一个数组。

我在HTML元素中添加了ng-attr-title，如下所示：

 <div pop-over items='week.items' ng-attr-title="{{'Week number:'+ week.week}}">  Total sales this week : {{week.sales}}</div>

然后，在我的指示中，我主要遵循了马克·科尔曼的做法。

    angular.module('vegadirectives', [])
.directive('popOver', function ($compile, $templateCache) {
var itemsTemplate = "<ul class='popper'><li ng-repeat='thing in items track by $index'>";
itemsTemplate+=" <i class='fa fa-square' ng-class=";
itemsTemplate+="{purple:thing.color==='purple','orange':thing.color==='orange','white':thing.color==='white','pink':thing.color==='pink','red':thing.color==='red','green':thing.color==='green','yellow':thing.color==='yellow'}";
itemsTemplate+="></i>  {{thing.model}} - {{thing.qty}}</li></ul>";
    var getTemplate = function () {
        var template=itemsTemplate;
        return template;
    }
    return {
        restrict: "A",
        transclude: true, 
        template: "<span ng-transclude></span>",
        link: function (scope, element, attrs) {
            var popOverContent;

            if (scope.items) {
                var html = getTemplate();
                popOverContent = $compile(html)(scope);                    
                var options = {
                    trigger:'click',
                    content: popOverContent,
                    placement: "right",
                    html: true,
                    title:scope.title

                };
                if (scope.$last) {
                }
                $(element).popover(options);
            }
        },
        scope: {
            items: '=',
           title:'@'
        }
    };
});

说明：

为了用项目列表填充我的popover，并用一些花哨的颜色方块来指示不同类型的项目，我创建了一块HTML代码。$compile将使用这个名为itemsTemplate的区块来创建具有作用域的popover内容。我认为用法是$compile（htmlstring）（scope）。

接下来是popover选项设置的标准内容。对于带标题的范围插值，我指定了选项title:和scope.title。然后，在最后的scope:选项中，用'='和'@'指定两个作用域元素。

因此，title:scope.title引用或绑定到scope: {items:'=', title:'@' }，而title:'@'是HTML中标题的属性，即ng-attrs-title={{week.week}}，其中周来自外部ng重复循环。

希望能有所帮助。

在https://stackoverflow.com/a/17864868/2379762，我尝试了data original title＝｛｛I.title｝｝，它有效。

http://jsfiddle.net/f1tjj8x5/

<li ng-repeat="i in items" data-toggle="popover" data-original-title="{{ i.title }}" 
        data-content="Popover Content"
        init-popover>{{ i.data }}</li>