Sumanth madey Sumanth madey - 5 months ago 28
AngularJS Question

Unable to use custom directive when ng-model is used

While trying to use custom directive with an output linked to text field im getting below issue


[$compile:tplrt] Template for directive 'myDir' must have exactly one
root element.
http://errors.angularjs.org/1.5.0/$compile/tplrt?p0=myDir&p1= can some
one show some light here


Code

<!DOCTYPE html>
<html ng-app="myapp1">

<head>
<title> ANGULAR</title>
<script src="angular.min.js"></script>
<script type="text/javascript">
angular.module('myapp1', []).directive('myDir', function() {
return {
restrict: 'E',
replace: true,
template: '<input type="text" ng-model="title"> {{title}}'
};
});
</script>
</head>

<body>
<div>
<my-dir>sadas</my-dir>
</div>
</body>

</html>

Answer

Error message is clear I guess your template should look like this:

<div><input type="text" ng-model="title"> {{title}}</div>

instead of just:

<input type="text" ng-model="title"> {{title}}