javascript - AngularJS weird error when creating simple directive -
i'm trying create simple directive in angularjs , don't understand why code below gives me next error:
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() { homecoming { 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 name here" ng-keypress="valid=true"/></p> </script> <form> <div ta-with-message></div> <input type="submit"> </form> </div> </body> </html> what don't understand works when replace h2 span e.g.:
<p>blah <em>blah<em>blah</em></em> blahhello, <span>kkk</span> <input type="text" placeholder="enter name here" ng-keypress="valid=true"/></p> does have display of element? why happening , how prepare it?
this page of angularjs error reference should help you:
error: $compile:tplrt: invalid template root further explanation auto-closing<p> tag first (non-working) illustration in question contains slight html markup error.
why? because <p> allows phrasing content within it. heading tags not phrasing content. when browser sees non-phrasing-content (for example, heading) tag within <p>, implicitly adds </p>.
not putting </p> before <h2> not error, it's allowed html specs:
the end tag may omitted if <p> element followed <address>, <article>, … <h1>, <h2>, <h3>, … or <p> element, or if there no more content in parent element , parent element not <a> element.
but in end first illustration in question interpreted browser this:
<p>blah <em>blah<em>blah</em></em> blahhello,</p> <h2>kkk</h2> <input type="text" placeholder="enter name here" ng-keypress="valid=true"/> note how </p> changed position after <input> before <h2>.
this makes such directive template incompatible, because has more 1 root element. angularjs docs linked above, directive template must have content within single top-level tag. however, first illustration after browser interpretation turns out have 3 top-level tags.
when alter <h2> <span> illustration ok, since <p> doesn't auto-close anymore (<span> phrasing content).
wrap template in <div>. unlike <p>, can contain type of content. :)
javascript html angularjs angularjs-directive
No comments:
Post a Comment