Javascript 创建简单指令时出现AngularJS异常错误_Javascript_Html_Angularjs_Angularjs Directive

Javascript 创建简单指令时出现AngularJS异常错误

javascript html angularjs

Javascript 创建简单指令时出现AngularJS异常错误,javascript,html,angularjs,angularjs-directive,Javascript,Html,Angularjs,Angularjs Directive,我试图在angularJs中创建简单指令，但不明白为什么下面的代码会给我以下错误： Error: [$compile:tplrt] http://errors.angularjs.org/undefined/$compile/tplrt?p0=taWithMessage&p1=customButton.html 代码是： <!doctype html> <html> <head> <script src="https://ajax.

我试图在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>

它是否与元素的显示有关？为什么会发生这种情况？我将如何修复它？

这一页的AngularJS错误参考将帮助您：

进一步解释自动关闭标签第一个（非工作）示例包含一个轻微的HTML标记错误

为什么?？因为

只允许在其中使用短语内容。标题标记不是措辞内容。当浏览器在

中看到一个非短语内容（例如标题）标记时，它会隐式地添加

不将

放在

之前不是错误，HTML规范允许这样做：

如果

元素后面紧跟着一个，，…，，，…或另一个元素，或者如果父元素中没有更多内容，并且父元素不是元素，则可以省略结束标记
但最后，浏览器会这样解释第一个问题示例：
    <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"/>

废话废话，废话废话，
kkk

注意
如何将其位置从
之后更改为
之前
不兼容的指令模板
这使得这样的指令模板不兼容，因为它有多个根元素。
根据上面链接的AngularJS文档，指令模板的所有内容必须包含在一个顶级标记中。然而，浏览器解释后的第一个示例有三个顶级标记
当您将
更改为
时，您的示例是正确的，因为
不再自动关闭（
是语法内容）
你能做什么
将模板包装在
中。与
不同，它可以包含任何类型的内容。：）
    <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"/>