Sumanth madey Sumanth madey - 1 year ago 116
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.$compile/tplrt?p0=myDir&p1= can some
one show some light here


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

<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}}'



Answer Source

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}}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download