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){

}]);