我正在尝试开发一个通用的验证指令.我的主要目的是在input元素的父元素上应用指令并使用该指令,我想添加一些验证状态,如bootstrap提供的has-error和has-success类.
我可以用chrome做到这一点.但是,我的问题始于IE8.是的,我运气不好.我必须支持IE8.
无论如何,我的代码能够在模板中的适当位置转换输入元素.但是,我不清楚为什么在IE8中弹出这个错误以及在哪一行也是如此.错误是
TypeError：Object不支持此属性或方法< div ng-transclude>
这是我的代码,因为它只是我现在正在准备的一个演示,我使用了内联样式和脚本.
<!DOCTYPE html>
<html ng-app="myApp" id="ng-app">
<head>
<title>All in One Validation Directive</title>
<script type="text/javascript" src="scripts/angular.js"></script>
<link type="text/css" rel="stylesheet" href="styles/bootstrap.css"/>
<script type="text/ng-template" id="validationContent">
<div ng-transclude></div>
<p class="bg-danger">{{errorMessage}}</p>
</script>
<script type="text/javascript">
var app=angular.module('myApp',[]);
app.controller('DefaultController',function($scope){
$scope.user={};
});
app.directive('validationDirective',function(){
return {
restrict: 'A',/*template: function(){
return angular.element(document.querySelector('#validationContent')).html();
},*/
template: '<div ng-transclude></div>',transclude: true,link: function(scope,element,attrs){
}
};
});
</script>
</head>
<body ng-controller="DefaultController">
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h4>All in One Validation Directive</h4>
</div>
<div class="panel-body">
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-3">Enter Your Name</label>
<div class="col-xs-3" data-validation-directive>
<input type="text" class="form-control" ng-model="user.name">
</div>
</div>
</div>
</div>
User Name is here :{{user.name}}
</div>
</div>
</body>
</html>
编辑
在一些命中和试验之后,我能够得出结论,这是由于存在要被转换的divison中的输入元素而发生的.如果我从该分区中删除输入元素,一切正常,但这不是指令的目标.任何人 ？任何的想法 ？我怎么能把它整理出来？或者我可能是错误的方向？有线索吗？
解决方法
在经历了很多突破点和
Sarah’s invaluable help之后,事实证明它与两件事有关：
> IE8在输入的结束标记作为额外节点后检测(而不是忽略)空白区域(尝试将其附加到div [ng-transclude]).
> JQLite没有正确处理文本节点(我不确定什么处理不当,但我没有进一步调查的心情：/).
可能的修复：
>包括jQuery：这解决了问题(也许还有其他潜在的问题),但是必须包含一个完整的lib,只是为了解决一个版本的一个浏览器的角落问题,这是令人沮丧的.
>确保控件的结束标记后面没有空格字符(空格,制表符,换行符).我不确定哪些标签会受到影响(< input>,< select>和< fieldset>似乎是,但可能还有其他标签).
您可以删除任何空格：< input ... />< / div>
或者(如果你想保留代码结构,例如为了便于阅读),你可以在注释块中“包装”空格：
<div>
<input ... /><!--
--></div>
另见,这是short demo.
