angularjs 指令 做为属性且 不使用template 可是指令又必须有html的状况

假设有个自定义的下拉框  且根据 不一样位置的input 定位在此input下面，这种问题 我是这样操做的 不使用template 指令自带的模板 觉得会替换dom  其实也能够采用标签的方式去写  可是指令要获得input的位置因此只能采用属性的方式去写

例子：<div><input   select-account-panel

bank-info="addVendorView.bankCityList"
select-bank-info = 'addVendorView.info'
bank-opening-bank = 'addVendorView.info.bankOpeningBank'
is-show-panel="addVendorView.isShowPanel"
ng-focus="addVendorView.isShowPanel=false"

></div>

/**
 * Created by 张猛 on 2017/6/12.
 */
'use strict';
angular.module('huilianyi.pages')
    .directive('selectAccountPanel', ['$q','$compile', function ($q,$compile) {
        var defer = $q.defer();
        var template = '<div class="search-panel-directive" ng-show="isShowPanel">' +
                ' <div ng-repeat="city in bankInfo | filter:view.filterData" ng-click="view.selectBankCity(city)"> ' +
                '<span>{{city.bankOpeningBank}}&nbsp;&nbsp;</span> ' +
                '<span>{{city.bankOpeningCity}}&nbsp;&nbsp;</span> ' +
                '<span>{{city.bankAccount}}</span> </div> ' +
                '</div> ';
        defer.resolve(template);
        var promise = defer.promise;

        return {
            restrict: 'A',
            scope: {
                bankInfo: '=',
                selectBankInfo: '=',
                bankOpeningBank:'=',
                nameCode: '=',
                isShowPanel:'='
            },
            link:function (scope, element, attrs) {
                var panel = {
                    elem:null,
                    show:function () {
                        scope.isShowPanel = true;
                        $(this.elem).css({
                            display:'block'
                        })
                        scope.$apply();//执行脏检查 更新数据
                        panel.resize();
                    },
                    hide:function () {//隐藏模板
                        scope.isShowPanel = false;
                        scope.$apply();
                    },
                    resize:function () {
                        if(!this.elem){
                            return
                        }
                       $(this.elem).css({
                           left:$(element).offset().left+'px',
                           top:$(element).offset().top+'px',
                       })
                    },
                    init:function () {
                       $(element).on('click',function () {
                           panel.show();
                           return false;
                       });

                        $(window).on('click', (function (_this) {
                            return function () {
                                return _this.hide();
                            };
                            //点击别处 关闭
                        })(this));
                        $(window).on('popstate', function () {
                            panel.hide();
                            //浏览器返回事件
                        });
                       this.elem.on('click',function (event) {//阻止事件冒泡
                           return event.stopPropagation();
                       });
                    }
                };
                return promise.then(function (template) {
                    var $template = $compile(template)(scope)//重点采用$compile去编译模板而后放入到body中 避免了使用template;
                    $('body').append($template);
                    panel.elem = $('.search-panel-directive');
                    panel.init();

                    scope.$on('$destroy', function () {
                        $(panel.elem).remove();
                        $(window).unbind('click');
                        //关闭后消除掉.
                    });
                })
            },
            controller: 'com.handchina.huilianyi.admin.SelectAccountPanelController'
        }
    }]).controller('com.handchina.huilianyi.admin.SelectAccountPanelController',['$scope',function($scope){

}]);