angularJS配合bootstrap动态加载弹出提示内容

1.bootstrp的弹出提示

　　bootstrap已经帮我们封装了非常好用的弹出提示Popover。

　　http://v3.bootcss.com/javascript/#popovers

2.自定义popover指令

　　我们使用一个指令给任意元素加上popover，并且可以根据情况改变popover的content内容。

JS：

<script>

    var app = angular.module('testApp', []);

    app.factory('dataService',function() {

        var service = {};

        service.cacheObj = {};

        service.getAppName = function (appId, callback) {

            if (service.cacheObj[appId]) {

                console.log('get name from cache');

                callback(service.cacheObj[appId]);

                return;

            }

            //here is sample. Always ajax.

            service.cacheObj[appId] = 'QQ';

            callback('QQ');

        };

        return service;

    });

    app.directive('myPopover', function (dataService) {

        return {

            restrict: 'AE',

            link: function (scope, ele, attrs) {

                $(ele).data('title','App');

                $(ele).data('content', "<div id ='popDiv'>Name:-</div>");

                $(ele).popover({ html: true, trigger: 'hover'});

                $(ele).on('shown.bs.popover',function() {

                    var popDiv = $('#popDiv');

                    console.log(popDiv);

                    dataService.getAppName('xxx',function(name) {

                        popDiv.html('Name:'+name);

                    });

                });

            }

    };

    });

    app.controller("test",function($scope) {

    });

</script>

html：

</div>