我正在尝试在angularJs中创建简单的指令，并且不明白为什么下面的代码会给我以下错误：
Error: [$compile:tplrt] http://errors.angularjs.org/undefined/$compile/tplrt?p0=taWithMessage&p1=customButton.html
代码是：
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script>
var app = angular.module('aaa', []);
app.directive("taWithMessage",function() {
return {
templateUrl: "customButton.html",
replace: true
};
}
);
</script>
</head>
<body>
<div ng-app="aaa">
<script type="text/ng-template" id="customButton.html">
<p>blah <em>blah<em>blah</em></em> blahHello,
<h2>kkk</h2>
<input type="text" placeholder="Enter a name here" ng-keypress="valid=true"/></p>
</script>
<form>
<div ta-with-message></div>
<input type="submit">
</form>
</div>
</body>
</html>
我不明白的是，当我用h2替换span时，它会起作用，例如：
<p>blah <em>blah<em>blah</em></em> blahHello,
<span>kkk</span>
<input type="text" placeholder="Enter a name here" ng-keypress="valid=true"/></p>
是否与元素的display有关？为什么会发生这种情况，我该如何解决？
答案 0 :(得分：0)
AngularJS错误参考页面可以帮助您：
<p>代码有问题的第一个（非工作）示例包含轻微的HTML标记错误。
为什么呢？因为<p>仅允许在其中使用措辞内容。标题标签不是措辞内容。当浏览器在<p>中看到非短语内容（例如标题）时，会隐式添加</p>。
不在</p>之前放<h2>不是错误，HTML规范允许这样做：
如果
<p>元素后面紧跟<address>，<article>，...<h1>，<h2>，{{1>，则可以省略结束标记}或其他<h3>元素，或者如果父元素中没有更多内容且父元素不是<p>元素。
但最后有问题的第一个例子被浏览器解释为：
<a>请注意 <p>blah <em>blah<em>blah</em></em> blahHello,</p>
<h2>kkk</h2>
<input type="text" placeholder="Enter a name here" ng-keypress="valid=true"/>
在</p>之后到<input>之前的位置如何变更。
这使得这样的指令模板不兼容，因为它具有多个根元素。 通过上面链接的AngularJS文档，您的指令模板必须将其所有内容放在单个顶级标记内。但是，您在浏览器解释后的第一个示例结果是有三个顶级标记。
当您将<h2>更改为<h2>时，您的示例就行了，因为<span>不再自动关闭（<p>是短语内容）。
将您的模板包裹在<span>中。与<div>不同，它可以包含任何类型的内容。 ：）