Angularjs没有为Bootstrap Popover插入标题

Question

我正在尝试在 AngularJS ngRepeat 指令中使用 Bootstrap Popover。问题是标题属性没有被插值。我该如何解决这个问题？

查看

<div ng-app="app" id="ng-app">
<ul ng-controller="Main">
    <li ng-repeat="i in items" data-toggle="popover" title="{{ i.title }}" <!-- Title isn't interpolated so Popover doesn't render a title -->
        data-content="Events: {{ day.events.length }}"
        init-popover>{{ i.data }}</li>
</ul>

代码

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

app.controller('Main', ['$scope', function($scope){
    $scope.items = [
        { title: 'Title 1', data: 'lorem' },
        { title: 'Title 2', data: 'ipsum' },
    ];
}]);

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

FIDDLE

Answer 1

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

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

Answer 2

你不应该使用title="{{i.title}}"，而应该使用ng-attr-title="{{i.title}}"...

Answer 3

我遇到了同样的问题。我正在使用引导程序 v3.3.6 和 Angular v1.5.0

添加属性 data-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();
        }
    };
}]);

Answer 4

将$timeout 添加到指令将解决您的问题。 当 ng-repeat 的最后一个元素在 UI 上呈现并运行 $digest 循环时，将调用 $timeout。

指令

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

Working Fiddle

希望这可以帮助你。谢谢。

Answer 5

考虑将 ui-bootstrap 用于原生 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 语法已正确解析。然后，在指令中，我们可以检查该属性来设置弹出框标题。

小提琴：here

Answer 6

只是在这里添加到知识库。这是有角度的方式，以防万一有人需要。我的解决方案基于Mark Coleman's PopOver tutorial，当然还有 Nate Barbettini 贡献的内容。

我的情况是我在项目中的项目上有一个嵌套的 ng-repeat，所以我需要为我的弹出窗口设置一个标题，该标题基于存储在范围中的数组，而弹出窗口的内容来自另一个存储的数组在作用域的数组中。

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

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

然后，在我的指令中，我主要遵循 Mark Coleman 的做法。

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

解释：

为了用一个项目列表填充我的弹出框，用一些花哨的颜色方块来指示不同类型的项目，我创建了一段 HTML 代码。 $compile 将使用这个名为 itemsTemplate 的块来创建具有范围的弹出内容。我认为用法是$compile(htmlstring)(scope)。

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

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

希望对您有所帮助。

Answer 7

在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>