twitter-bootstrap 对象不支持此属性或方法<div ng-transclude>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24221661/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Object doesn't support this property or method<div ng-transclude>
提问by Paras
I am trying to develop a generic validation directive. My primary aim is to apply the directive on the input element's parent and using that directive, I want to add validation state like has-errorand has-successclasses provided by Bootstrap.
我正在尝试开发通用验证指令。我的主要目标是在输入元素的父元素上应用该指令，并使用该指令，我想添加验证状态has-error和has-successBootstrap 提供的类。
I am able to do this in chrome. However, my problems start with IE8. Yes, I am in hard luck. I have to support IE8.
我可以在 chrome 中做到这一点。但是，我的问题始于 IE8。是的，我运气不好。我必须支持IE8。
Anyway, my code is able to transclude input element in appropriate location in template. However, I don't have a clue why this error is popping up in IE8 and at which line also. Error is
无论如何，我的代码能够在模板中的适当位置嵌入输入元素。但是，我不知道为什么会在 IE8 中以及在哪一行弹出此错误。错误是
TypeError: Object doesn't support this property or method<div ng-transclude>
TypeError: Object doesn't support this property or method<div ng-transclude>
Here is my code, since it is just a demo which I am preparing right now, I have used inline styles and scripts.
这是我的代码，因为它只是我现在正在准备的演示，所以我使用了内联样式和脚本。
<!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>
And if you believe that I am using wrong approach for this problem. Please suggest the right one.
如果您认为我对这个问题使用了错误的方法。请推荐合适的。
EDIT
编辑
After some hit and trial, I am able to conclude that this is happening due to presence of input element in the divison to be transcluded. If I remove input element from that division, everything works fine but that is not the goal of the directive. Anyone ? Any Idea ? How I can sort it out ? Or may be I am in wrong direction ? Any clues ?
经过一些尝试和试验，我能够得出结论，这是由于要嵌入的分区中存在输入元素而发生的。如果我从该部门中删除输入元素，一切正常，但这不是指令的目标。任何人 ？任何的想法 ？我该如何解决？或者我可能走错了方向？任何线索？
采纳答案by gkalpak
After a lot of break-points and Sarah's invaluable help, it turned out it has to do with two things:
经过大量断点和莎拉的无价帮助，结果证明它与两件事有关：
IE8's detecting (and not ignoring) the white-space after your
input's closing tag as an extra node (trying to append it todiv[ng-transclude].JQLite's not proper handling of text-nodes (I am not exactly sure what is not handled properly, but I wasn't in the mood of investigating further :/).
IE8 检测（而不是忽略）您
input的结束标记后的空格作为额外节点（尝试将其附加到div[ng-transclude].JQLite 没有正确处理文本节点（我不确定哪些处理不当，但我没有心情进一步调查:/）。
Possible fixes:
可能的修复：
Include jQuery: This solves the problem (and maybe other potential issues), but it is frustrating to have to include a whole lib, just to solve a corner-case issue with one version of one browser.
Make sure there are no white-space characters (spaces, tabs, new-lines) after your controls' closing tag. I am not sure which tags are affected (
<input>,<select>and<fieldset>seem to be, but there may be others).
You can either strip any white-space:<input ... /></div>
or (if you want to retain the code structure, e.g. for readability's sake) you can "wrap" the white-space in a comment-block:<div> <input ... /><!-- --></div>
包含 jQuery：这解决了问题（可能还有其他潜在的问题），但是为了解决一个浏览器的一个版本的极端问题而不得不包含一个完整的库是令人沮丧的。
确保控件的结束标记后没有空白字符（空格、制表符、换行符）。我不知道该标签的影响（
<input>，<select>并且<fieldset>似乎是，但也有可能是其他）。
您可以删除任何空格：<input ... /></div>
或者（如果您想保留代码结构，例如为了可读性）您可以将空格“包装”在注释块中：<div> <input ... /><!-- --></div>
See, also, this short demo.
另请参阅此简短演示。
