鼠标悬浮展示弹框(angularjs)

/**
 *  调用此指令的方法:
 *  
 
 *  
 *
 *  如果多出引用此指令，可以在传值的时候传递一个JSON对象过来用于显示窗口内容
 */
(function() {
    angular.module("app.core")
        .directive('oneName', function($q, $http, ENV, RequestUrls) {
            return {
                restrict: 'EA', //可以通过以下方式来调用指令:E(元素),A(属性),C(类),M(注释)
                template: '
 
  
  
   

    
content: {{ systemMesage.content }}
    
message_type: {{ systemMesage.message_type }}
    
creation_date: {{ systemMesage.creation_date }}
   
  
 ',
                replace: true,
                scope: {
                    icon: '@icon', //图标
                    radius: '@radius', //半径
                    image: '@image', //图片
                    right: '@right',
                    lineHeight: '@lineHeight',
                    fontSize: '@fontSize',
                    color: '@color',
                    background: '@background', //可以给styleTwo用
                },
                transclude: true, //如果不想让指令内部的内容被模板替换，可以设置这个值为true
                link: function(scope, element, attr) { //链接函数负责注册DOM事件和更新DOM
                    scope.styleOne = {
                        "width": scope.radius + "px",
                        "height": scope.radius + "px",
                        "-moz-border-radius": scope.radius / 2 + "px",
                        "-webkit-border-radius": scope.radius / 2 + "px",
                        "border-radius": scope.radius / 2 + "px",
                        "margin-right": scope.right + "px",
                        "line-height": scope.lineHeight + "px",
                        "font-size": scope.fontSize + "px",
                        "color": scope.color,
                        "cursor": "pointer", //鼠标放上去是手的图标
                    };
                    //弹出框的css参数
                    scope.styleTwo = {
                        "border": "1px #0099ff solid",
                        "height": "180px",
                        "width": "300px",
                        "color": "black",
                        "background": "white",
                        "margin-top": "10px",
                        "margin-left": "-120px",
                        "position": "absolute",
                        "z-index": "9999",
                    };
                    scope.showDetail = false; //窗体是否可见ng-if
                    scope.systemMessages = [];
                    scope.systemMessagesLength = 0;
                    scope.openShowDetail = function() {
                        //鼠标进入和移除都调用的此方法，到时候需要判断事件后决定是否调用获取数据的方法
                        //鼠标焦点事件,此处改变ng-if
                        //调用获取数据的接口
                        var params = { //准备参数
                            "page": 1,
                            "size": 10
                        };

                        requestData(params).success(function(data) { //调用了下面那个方法
                            if (data.code === 'SUCCESS') {
                                scope.systemMessagesLength = data.data.total;
                                scope.systemMessages = data.data.list;
                                console.log(data);
                            } else {
                                console.log(data);
                            }
                        }).error(function(data) {
                            console.log(data);
                            alert("无法获取消息,请重试");
                        });

                        //显示框体
                        scope.showDetail = !scope.showDetail;
                    };

                    //暂时写的替代factory.js的方法
                    var requestData = function(params) {
                        //异步
                        var deferred = $q.defer();
                        var promise = deferred.promise;

                        $http.post(ENV.host + RequestUrls.systemMessageQuery, params, ENV.headers)
                            .success(function(data) {
                                if (data.code === 'SUCCESS') {
                                    deferred.resolve(data);
                                } else {
                                    deferred.resolve(data);
                                }
                            }).error(function(data) {
                                deferred.reject(data);
                            });

                        promise.success = function(fn) {
                            promise.then(fn);
                            return promise;
                        };
                        promise.error = function(fn) {
                            promise.then(null, fn);
                            return promise;
                        };
                        return promise;
                    };
                }
            }
        });
})();