我正在尝试开发通用验证指令。我的主要目的是申请输入元素的父的指令，并使用该指令，我要添加验证状态一样has-error，并has-success通过引导提供的类。
我能够在Chrome中做到这一点。但是，我的问题始于IE8。是的，我很不幸。我必须支持IE8。
无论如何，我的代码能够在模板的适当位置包含输入元素。但是，我不知道为什么该错误会在IE8中弹出，并且在哪一行也是如此。错误是
TypeError: Object doesn't support this property or method<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>
如果您认为我针对此问题使用了错误的方法。请提出正确的建议。
编辑
经过一番尝试之后，我可以得出结论，这是由于输入元素存在于待分割的格中而导致的。如果我从该划分中删除输入元素，那么一切都会正常运行，但这不是该指令的目标。任何人 ？任何的想法 ？我该如何解决呢？还是我走错了方向？有什么线索吗？
经过很多断点和Sarah的宝贵帮助之后，事实证明它与两件事有关：
IE8将您input的结束标记后的空白检测为（但不忽略）空白作为额外的节点（尝试将其附加到）div[ng-transclude]。
JQLite对文本节点的处理不正确（我不完全确定未正确处理的内容，但是我不打算进一步调查：/）。
可能的修复：
包含jQuery：这解决了这个问题（可能还有其他潜在的问题），但是必须包含一个完整的lib只是为了用一个浏览器的一个版本解决一个极端情况，这令人沮丧。
确保控件的结束标记后没有空格字符（空格，制表符，换行符）。我不确定哪些标签会受到影响（<input>，<select>而且<fieldset>似乎受到影响，但可能还有其他标签）。
您可以删除任何空格：<input ... /></div>
或者（如果您想保留代码结构，例如，出于可读性考虑），则可以将空白“包装”在注释块中：
<div>
<input ... /><!--
--></div>
另请参见此简短演示。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句