结构-行为-样式-angularJs 指令解决IE下无PlaceHolder的问题

最近项目开发的时候遇到一个头疼的问题，在测试IE兼容性的时候，发现placeholder在IE下无效。查网上说也是有各种解决方案，但是都不是我想要的，于是决定自己写一个。思路：placeHolder是一个提示性的文字 ，我们完全可以用Span元素来达到这个效果。当用户点击Input的时候隐藏Span，失去焦点的时候Blur一下，恢复Span。但是要考虑到默认有内容的情况，这个时候加一个指令判断开关，有内容就不显示Span。

具体指令如下：

 

define(['angular'], function(){
var commonDirectives = angular.module("commonDirectives", []);
commonDirectives.directive('pHolder', [function () {
        return {
            restrict: 'AE', 
            scope: {
                inputid:'@',  //指定input的id
                content:'@',  //placeholder的内容
                tops:'@',     //绝对定位的相对上边距值
                lefts:'@',    //绝对定位的相对左边距值
                setp:'@'     //初始控制显示隐藏
            },
            replace:true,
            template: '<span ng-show="plaShow" style="top:{{tops}}px;left:{{lefts}}px;" class="placeHolder-text" >{{content}}</span>',
            link: function (scope, ele, attr) {
                    //has text ? 
                    if(!scope.setp){
                         scope.plaShow = true;
                    }else{
                        scope.plaShow = false;
                    }
                    var tag  = $("#"+scope.inputid);
                    $(ele[0]).on('click',function(e){
                        scope.$apply(function(){
                            return scope.plaShow = false;
                        })
                        $("#"+scope.inputid).focus();
                    })
                    $("#"+scope.inputid).on('click',function(e){
                        scope.$apply(function(){
                            return scope.plaShow = false;
                        })
                    })
                    $("#"+scope.inputid).blur(function(){
                        if($(this).val() == ""){
                            scope.$apply(function(){
                                return scope.plaShow = true;
                            })
                        }
                    }
                
            }
        };
    }])
   
})