What's wrong with my Angular JS

Question

I want to replace sometext by defined text with the help of angular JS. My html is

<!DOCTYPE html>
<html>
<head>
    <title>Directive</title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body ng-app="myApp">
    <div hello-world>sometext</div>
</body>
</html>

and JS is

var app = angular.module('myApp', []);

app.directive('helloWorld', function() {
  return {
      restrict: 'AE',
      replace: 'true',
      template: '<input type="text" ng-model="headline"/><br/>{{headline}}'
  };
});

My browser says that,

Error: [$compile:tplrt] Template for directive 'helloWorld' must have exactly one root element....

How to solve this. Thank you.

Try to wrap the template inside a div

Sajeetharan
– Sajeetharan

2015-04-11 16:15:51 +00:00
Commented Apr 11, 2015 at 16:15 — Sajeetharan
– Sajeetharan, Commented Apr 11, 2015 at 16:15

Manube · Accepted Answer · 2015-04-11 16:28:01Z

1

return {
      restrict: 'AE',
      replace: 'true',
      template: '<div><input type="text" ng-model="headline"/><br/>{{headline}}</div>'
  };

should do it. The important part is the div tag wrapping the template string.

As Sajeetharan rightly commented, there must be only one wrapper for the template that will replace your directive.

Otherwise, the replacement operation would result in a single element (the directive) being replaced with multiple elements or nodes, which is unsupported and not commonly needed in practice.

It does not have to be a div, though; so when you have 'replace':true, your template must be like:

<any-tag-you-wish>template content</any-tag-you-wish>

Please read doc for template in directive with replace mode on

edited Apr 11, 2015 at 16:28

answered Apr 11, 2015 at 16:20

Manube

5,2294 gold badges38 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Iftakharul Alam Over a year ago

What Changes I have to make if I declare my directive as comment i.e.

Manube Over a year ago

well the change is in the template property of your directive: 'template':'<div><input type="text" ng-model="headline"/><br/>{{headline}}</div>'; will edit the answer...

Manube Over a year ago

Oh sorry, you need this: restrict: 'M'

Iftakharul Alam Over a year ago

Yes. restrict: 'M'. Thanks for helping.

Collectives™ on Stack Overflow

What's wrong with my Angular JS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related