Geek Answers Handbook

Angular JS: include partial HTML inside another ng-include

I am using index.html created with Yeoman, which looks something like this:

 <html> <head>...</head> <body> <div ng-include="'views/main.html'"></div> </body> </html>

Now I know that I can’t use ng-include inside another ng-include , so I’m not even trying to do this, but that’s the goal that I want to achieve.

I am using ui.router in my main.html for nested views, but I cannot do something like this:

 <header class="header"> <!-- Rather long HTML code that I would like to put in a separate file like 'views/parts/header.html' --> </header> <div ui-view="" class="container"></div>

One naive solution would be to exclude the first ng-include and use it in main.html for the header, footer, and the like.

So, hit me with what you have, but not with that!

Edit: this is what I would like to have (but can't, since I'm already inside ng-include )

  <div ng-include="'views/parts/header.html'"></div> <div ui-view="" class="container"></div>
+7
javascript angularjs angular-ui-router angularjs-ng-include
source share
1 answer

If I understand you correctly, this is possible. As described here:

  • stateprovider in angularjs - not displaying ui-view
  • and shown here in this plunker

In the end, we can use both worlds, but we have to do one more thing:

 app.controller('MainCtrl', function($scope, $state, ....){ $state.go("/"); });

Since starting ng-include and ui-router does not match. We need to force reload the state as soon as the target (i.e. the contents of our <div ng-include="'views/main.html'"></div> ) is available.

NOTE. Waiting for the contents of main.html as follows:

 <div ng-controller="MainCtrl"> ... <div ui-view></div> </div>

This should solve the problem ...

EXTEND: how to re-enable?

The power of the ui-router here seems unlimited. We can * (re) * use ng-include again, inside the ui-view . So instead:

 <div ng-include="'views/parts/header.html'"></div> <div ui-view="" class="container"></div> // eg filled by content.html

We can move the title to the content.html view itself

 <div> <div ng-include="'views/parts/header.html'"></div> </div>

Please note that here

+3
source share

More articles:


All Articles