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 ng-app="testApp">
<div ng-controller="test">
<div>
<a my-popover>app 1</a>

<a my-popover>app 2</a>
</div>

</div>

</div>