创建简单指令时AngularJS奇怪的错误答案

【问题标题】：AngularJS weird error when creating simple directive创建简单指令时AngularJS奇怪的错误
【发布时间】：2014-06-25 10:07:28
【问题描述】：

我正在尝试在 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 有关系吗？为什么会发生这种情况，我该如何解决？

【问题讨论】：

标签： javascript html angularjs angularjs-directive

【解决方案1】：

AngularJS 错误参考的这个页面应该可以帮助你：

Error: $compile:tplrt: Invalid Template Root

进一步说明

自动关闭`<p>`标签

有问题的第一个（非工作）示例包含轻微的 HTML 标记错误。

为什么？因为<p> 只允许在其中短语内容。标题标签不是短语内容。当浏览器在<p> 中看到非短语内容（例如，标题）标签时，它会隐式添加</p>。

没有将</p> 放在<h2> 之前不是错误，HTML 规范允许这样做：

如果<p> 元素后面紧跟<address>、<article>、...<h1>、<h2>、<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> 之后更改为<h2> 之前。

指令模板不兼容

这使得这样的指令模板不兼容，因为它有多个根元素。通过上面链接的 AngularJS 文档，您的指令模板必须将其所有内容都包含在单个顶级标记中。但是，浏览器解释后的第一个示例结果证明具有三个顶级标签。

当您将<h2> 更改为<span> 时，您的示例就可以了，因为<p> 不再自动关闭（<span> 是短语内容）。

你能做什么

将您的模板包装在 <div> 中。与<p> 不同，它可以包含任何类型的内容。 :)

【讨论】：

进一步说明

自动关闭&lt;p&gt;标签

指令模板不兼容

你能做什么

自动关闭`<p>`标签