Using ngInclude multiple times in Angularjs

Question

I have this little script and the controller in angular is completely empty so nothing there.

My question is why can't I run to ngIncludes (By the way no errors)?

<!DOCTYPE html>
<html ng-app="demo">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height    attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<meta name="msapplication-tap-highlight" content="no" />

<script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="bower_components/angularjs/angular.min.js"></script>
</head>
<body>

<div ng-controller="main">
<ng-include src="'templates/android/header.html'" />
<ng-include src="'templates/android/newsfeed.html'" />
</div>

That would not be a good idea, since that makes sure it is a string in the js parser. — user1645908
– user1645908, Commented Aug 9, 2014 at 9:55
And I would try: <div ng-include="templates/android/header.html'"></div> — Maxim Shoustin
– Maxim Shoustin, Commented Aug 9, 2014 at 9:58

Community · Accepted Answer · 2017-11-27 07:49:15Z

3

I had same problem, but in my case I didn't close the div tag properly:

<div ng-include="'partials/agendar.html'">
<div ng-include="'partials/atendimento.html'">

As I saw you do that, but you're using the 'ng-include' as tag. Try like this (worked perfectly for me). Be sure your angular is updated and then use only 'ng-include' (no 'data-'):

<div ng-include="'partials/agendar.html'"></div>
<div ng-include="'partials/atendimento.html'"></div>

Hope it helps.

edited Nov 27, 2017 at 7:49

CommunityBot

11 silver badge

answered Aug 28, 2014 at 18:23

Andre Medeiros

2343 silver badges8 bronze badges

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

1 Comment

Eric Hedstrom Over a year ago

Thanks for this. I had found an example with self-closing div tags like <div ng-include="'path.html'" />, but the second div would not show until I changed them to use separate closing tags: <div ng-include="'path.html'"></div>

Miraage · Accepted Answer · 2014-08-09 10:02:49Z

0

I prefer valid HTML and suggest you:

<div data-ng-include="'templates/android/header.html'"></div>
<div data-ng-include="'templates/android/newsfeed.html'"></div>

answered Aug 9, 2014 at 10:02

Miraage

3,4943 gold badges28 silver badges43 bronze badges

1 Comment

user1645908 Over a year ago

Your example does not return any errors, but only returns the first include and then I am back to scratch. In general my issue is that I can't do more than one include (the next simply doesn't show up). Sorry if I wasn't exactly clear on that.

parthicool05 · Accepted Answer · 2014-08-09 10:05:56Z

0

Can you start without src attribute like this:

if you give this type it doesn't show any error messages ngInclude the attribute binding so it doesn't show any error messages.

<data-ng-include="'templates/android/header.html'" />
<data-ng-include="'templates/android/newsfeed.html'" />

The correct way is this:

<div data-ng-include="'templates/android/header.html'"></div>
<div data-ng-include="'templates/android/newsfeed.html'"></div>

edited Aug 9, 2014 at 10:05

answered Aug 9, 2014 at 9:59

parthicool05

2551 silver badge10 bronze badges

6 Comments

user1645908 Over a year ago

I just tried your example and it returned the first include. For the second one the following error: TypeError: Cannot read property 'insertBefore' of null

parthicool05 Over a year ago

You don't use src attribute in ngInclude. ngInclude like as src attribute

user1645908 Over a year ago

I just edited my own text, since I did stupid typo's. But It still write that error then.

user1645908 Over a year ago

No it still doesn't work If I am using it with W3 appliant syntax I will get the earlier mentioned error, if not it doesn't return any errors, but in both cases only show the first include.

parthicool05 Over a year ago

I done it both the included items will show in my site it doesn't show any errors...

|

Avag Sargsyan · Accepted Answer · 2016-10-26 12:48:25Z

0

Actually the question is not so clear for me but I tried like this and it worked correctly:

 <body ng-controller="MainCtrl">
     <div ng-include src='"file1.html"'></div>
     <div ng-include src='"file2.html"'></div>
  </body>

Demo

edited Oct 26, 2016 at 12:48

Avag Sargsyan

2,5194 gold badges33 silver badges45 bronze badges

answered Aug 9, 2014 at 11:22

Narek Mamikonyan

4,6112 gold badges27 silver badges30 bronze badges

Collectives™ on Stack Overflow

Using ngInclude multiple times in Angularjs

4 Answers 4

1 Comment

1 Comment

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related