没有得到角度ui bootstrap popover

时间:2015-06-26 05:43:50

标签: angularjs angular-ui angular-ui-bootstrap

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

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

2 个答案:

答案 0 :(得分:3)

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

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

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

答案 1 :(得分:0)

你需要做两件事:

  1. 添加模块依赖项,使其能够找到popover

  2. 为引导程序添加css以获得更好的视觉效果

  3. 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);
                }
            }
        });