Angularjs не интерполирующий заголовок для Bootstrap Popover

Question

Я пытаюсь использовать Bootstrap Popover в директиве AngularJS ngRepeat. Проблема заключается в том, что атрибут title не интерполируется. Как я могу решить эту проблему?

Посмотреть

<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

Рассмотрите возможность использования ui-bootstrap для собственных угловых директив вместо версии jQuery Bootstrap. С угловым проектом они намного легче работать.

Edit: Если вы не можете сделать это, вот решение:

<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 создаст атрибут HTML называется popupTitle на элементе с угловым синтаксисом внутри {{}} правильно разобран. Затем в директиве мы можем просто изучить этот атрибут, чтобы установить заголовок popover.

Fiddle: here

Answer 4

Добавить $timeout директиве будет решить вашу проблему. $ timeout получит вызов, когда последний элемент ng-repeat отображается на UI & пробег $digest цикл.

Директивы

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

Просто, чтобы добавить в базу знаний здесь. Вот угловой способ, если кому-то понадобится. Я основывал свое решение на Mark Coleman's PopOver tutorial и, конечно же, что внес Nate Barbettini.

У меня было вложенное ng-repeat над элементами в элементах, поэтому мне нужно иметь заголовок для моего всплывающего окна, основанного на массиве, хранящемся в области, а содержимое всплывающего окна - из другого массива хранится в массиве области.

Я добавил ng-attr-title в мой HTML элемент, например, так:

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

Объяснение:

Чтобы пополнить мой поповер со списком элементов, с некоторой фантазии цветной квадрат, чтобы указать различные типы элементов, я создал кусок HTML кода. Этот кусок с именем itemsTemplate будет использоваться компиляцией $, чтобы создать popover-контент с областью. Я думаю, что использование $ compile (htmlstring) (scope).

Далее идет стандартный материал для настроек параметров для popover. Для интерполяции области с названием я указал опцию title: на scope.title. Затем, в варианте scope: вниз в конце, два элемента охвата указаны с '=' и '@'.

Таким образом, относится title:scope.title или связывается с scope: {items:'=', title:'@' } и title:'@' это атрибуты заголовка в HTML, который является ng-attrs-title={{week.week}}, где неделя от внешней нг-повторить цикл.

Надеюсь, что это поможет.

Answer 6

После нахождения этого ответа в 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> 

Answer 7

У меня была такая же проблема. Я использую bootstrap 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(); 
     } 
    }; 
}]);