не получить угловой ui bootstrap popover

Question

Я пытаюсь получить popover на моем <a> на hover, как показано на рисунке here внутри пользовательской директивы. Но его не доставит мне popover.what здесь пошло не так. Проверьте скрипту, чтобы увидеть все мое определение директивы.

template: '<h1><a popover-placement="bottom" popover="sd" popover-trigger="mouseenter">{{pages}}</a></h1>', 

Answer 1

Необходимо добавить зависимость пользовательского интерфейса Bootstrap. Таким образом, ваше определение модуля должно быть:

var MyDirectives = angular.module('testapp', ['ui.bootstrap']); 

Демо:http://jsfiddle.net/PfEaz/15/

Answer 2

Все, что вам нужно сделать две вещи:

1. Добавить зависимость так, что угловая в состоянии найти поповер

2. Добавить css для бутстрапа для лучшего визуального

HTML:

<div ng-app="testapp"> 
    <div ng-controller="testCtrlr"> 
     <div mdpagination pages="pages"></div> 
    </div> 
</div> 

Контроллер:

var MyDirectives = angular.module('testapp', ['ui.bootstrap']); 

MyDirectives.controller('testCtrlr', ['$scope', function ($scope) { 
    $scope.pages = 'hover me to get popover' 
}]); 

    MyDirectives.directive("mdpagination", function() { 
     console.log('DIRECTIVE!'); 
     return { 
      template: '<h1><a popover-placement="bottom" popover="sd" popover-trigger="mouseenter">{{pages}}</a></h1>', 
      replace: true, 
      restrict: 'A', 
      // scope: {pages:'@'}, //default 
      link: function (scope, element, attrs) { 
       console.dir(scope.pages); 
      } 
     } 
    });