没有得到 angular ui bootstrap 弹出窗口

Question

我正在尝试在我的 <a> 悬停时获得弹出窗口，如图所示 here 在自定义 directive.But 它没有让我 popover.what 出错了 here.Check fiddle 查看我的整个指令定义。

 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

你只需要做两件事：

添加模块依赖，使其angular能够找到弹出框
为bootstrap添加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);
            }
        }
    });

没有得到 angular ui bootstrap 弹出窗口

not getting angular ui bootstrap popover

angularjs

angular-ui

angular-ui-bootstrap