结构-行为-样式-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;                            })                        }                    }                            }        };    }])

})