I'm trying to create simple directive in angularJs and don't understand why the code below gives me following 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() {
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
e.g.:
<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? Why would that be happening and how would I fix it?