创建简单指令时出现AngularJS奇怪的错误
[英]AngularJS weird error when creating simple directive
问题描述
I'm trying to create simple directive in angularJs and don't understand why the code below gives me following error: 
我试图在angularJs中创建简单的指令，但不明白为什么下面的代码给我以下错误：
Error: [$compile:tplrt] http://errors.angularjs.org/undefined/$compile/tplrt?p0=taWithMessage&p1=customButton.html
the code is: 代码是：
<!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>
What I don't understand is that it works when I replace h2 with say span eg: 我不明白的是，当我用例如span替换h2时，它可以工作：
<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>
Does it have something to do with display of the element? 它与元素的display有关吗？ Why would that be happening and how would I fix it? 为什么会发生这种情况，我将如何解决？
1 个解决方案
解决方案1
0 已采纳 2014-06-25 01:44:50
This page of AngularJS error reference should help you: AngularJS错误参考的此页面应为您提供帮助：
Further explanation 进一步说明
Auto-closing <p> tag 自动关闭<p>标签
First (non-working) example in question contains a slight HTML markup error. 有问题的第一个（无效）示例包含一个轻微的HTML标记错误。
Why? 为什么？ Because <p> only allows phrasing content inside it. 因为<p>仅允许在其中短语内容 。 Heading tags are not phrasing content. 标题标签不措词内容。 When browser sees a non-phrasing-content (for example, heading) tag inside <p> , it implicitly adds </p> . 当浏览器看到<p>的非短语内容（例如标题）标签时，会隐式添加</p> 。
Not putting </p> before <h2> is not an error, it's allowed by HTML specs: 不将</p>放在</p> <h2> </p>之前不是错误，这是HTML规范所允许的：
The end tag may be omitted if the
<p>element is immediately followed by an<address>,<article>, …<h1>,<h2>,<h3>, … or another<p>element, or if there is no more content in the parent element and the parent element is not an<a>element.<p>元素后紧跟<address>，<article>，…<h1>，<h2>，<h3>，…或另一个<p>元素，或者存在父元素中没有更多内容，并且父元素不是<a>元素。
But in the end the first example in question is interpreted by browser like this: 但是最后，有关的第一个示例由浏览器解释如下：
<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"/>
Note how </p> changed its position from after <input> to before <h2> . 请注意</p>如何将其位置从<input>之后更改为<h2>之前。
Incompatible directive template 不兼容的指令模板
This makes such directive template incompatible, because it then has more than one root element . 这使这样的指令模板不兼容，因为它具有多个根元素 。 By AngularJS docs linked above, your directive template must have all its content inside a single top-level tag. 通过上面链接的AngularJS文档，您的指令模板必须将其所有内容包含在单个顶级标签中。 However, your first example after browser interpretation turns out to have three top-level tags. 但是，您在浏览器解释后的第一个示例竟然具有三个顶级标签。
When you change <h2> to <span> your example is OK, since <p> doesn't auto-close anymore ( <span> is phrasing content). 当您将<h2>更改为<span>您的示例就可以了，因为<p>不再自动关闭（ <span>表示内容）。
What you can do 你可以做什么
Wrap your template in a <div> . 将模板包装在<div> 。 Unlike <p> , it can contain any type of content. 与<p>不同，它可以包含任何类型的内容。 :) :)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.