Question

我试图在我的<a>上悬停，如here所示，在自定义指令中显示。但是它没有让我成为popover.what在这里出了问题。检查小提琴看到我的整个指令定义。

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

Answer 1

您需要添加UI Bootstrap依赖项。所以你的模块定义应该是：

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

演示： http://jsfiddle.net/PfEaz/15/

Answer 2

你需要做两件事：

添加模块依赖项，使其能够找到popover
为引导程序添加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);
            }
        }
    });

没有得到角度ui bootstrap popover

2 个答案: