What Is the Correct Syntax of Ng-Include

What is the correct syntax of ng-include?

You have to single quote your src string inside of the double quotes:

<div ng-include src="'views/sidepanel.html'"></div>

Source

How the right way to use ng-include

Are you accessing the app through a web server or by accessing the file through file:// protocol? In the latter case it won't work due to browser's security restrictions. The solution would be to install Apache or Nginx and access the app through something like http://localhost/myapp/index.html.

Angular ng-include and specifying controllers

mainCtrl and it's scope will be also available in your included part.

Calling parent function in ng-include

I can't debate on this point, but if you div has nested in several controller then you need to use $parent.$parent.$parent, depending on controller hierarchy it could be increased in length.

So I'd suggest you to use controllerAs syntax which provide alias of controller & it can be accessible inside any div by using alias of any controller you can access its method.

Markup

<div ng-controller="MainCtrl as main">
  {{ main.title }}
  <div ng-controller="AnotherCtrl as another">
    {{ another.title }}
    <div ng-controller="YetAnotherCtrl as yet">
      {{ yet.title }}
    </div>
  </div>
</div>

Refer this article for more detailed info.

AngularJS ng-include doesn't work

You cannot import local files directly using the file:// protocol.

You should take a look at:
Is it possible to use ng-include without web server?

Is there any limitation to use ng-include

The major problem is that each ng-include generates a http request, which will impact the page load times.

If all your doing is splitting up a page, you have a couple of options:

1. Create directives, if your HTML can be used in others areas of your app.
2. Use a templating engine like handlebars and a preprocessor to combine all the partials, in to a single page, like GulpJS or Grunt (i prefer Gulp).

---

Related Topics