What is the correct syntax of ng-include

Question

I   m trying to include an HTML snippet inside of an ng-repeat  but I can   t get the include to work  It seems the current syntax of ng-include is different than what it was previously  I see many examples using   lt div ng-include src  path file html  gt  lt  div gt    But in the official docs  it says to use   lt div ng-include  path file html  gt  lt  div gt    But then down the page it is shown as   lt div ng-include src  path file html  gt  lt  div gt    Regardless  I tried   lt div ng-include  views sidepanel html  gt  lt  div gt     lt div ng-include src  views sidepanel html  gt  lt  div gt     lt ng-include src  views sidepanel html  gt  lt  ng-include gt     lt ng-include  views sidepanel html  gt  lt  ng-include gt     lt ng include src  views sidepanel html  gt  lt  ng include gt    My snippet is not very much code  but it   s got a lot going on  I read in Dynamically load template inside ng-repeat that that could cause a problem  so I replaced the content of sidepanel html with just the word foo  and still nothing   I also tried declaring the template directly in the page like this    lt script type  text ng-template  id  tmpl  gt      foo  lt  script gt    And running through all the variations of ng-include referencing the script   s id  and still nothing   My page had a lot more in it  but now I   ve stripped it down to just this    lt  -- index html -- gt   lt html gt   lt head gt   lt  -- angular includes -- gt   lt  head gt   lt body ng-view  views main html  gt   lt  -- view is actually set in the router -- gt       lt  -- views main html -- gt       lt header gt           lt h2 gt Blah lt  h2 gt       lt  header gt       lt article id  sidepanel  gt           lt section class  panel  gt   lt  -- will have ng-repeat  panel in panels  -- gt               lt div ng-include src  views sidepanel html  gt  lt  div gt           lt  section gt       lt  article gt   lt  -- index html -- gt   lt  body gt   lt  html gt    The header renders  but then my template doesn   t  I get no errors in the console or from Node  and if I click the link in src  views sidepanel html  in dev tools  it takes me to my template  and displays foo

User · Answer

This worked for me   ng-include src   views templates drivingskills html     complete div    lt div id  drivivgskills  ng-controller  DrivingSkillsCtrl  ng-view ng-include src   views templates drivingskills html    gt  lt  div gt

User · Answer

You have to single quote your src string inside of the double quotes    lt div ng-include src   views sidepanel html   gt  lt  div gt    Source

User · Answer

lt ng-include src   views sidepanel html   gt  lt  ng-include gt    OR       lt div ng-include   views sidepanel html   gt  lt  div gt    OR       lt div ng-include src   views sidepanel html   gt  lt  div gt    Points To Remember   --  No spaces in src  --  Remember to use single quotation in double quotation for src

User · Answer

For those trouble shooting  it is important to know that ng-include requires the url path to be from the app root directory and not from the same directory where the partial html lives   whereas partial html is the view file that the inline ng-include markup tag can be found    For example      Correct     div ng-include src     views partials tabSlides add-more html           Incorrect     div ng-include src    add-more html

User · Answer

Maybe this will help for beginners   lt  doctype html gt   lt html lang  en  ng-app gt     lt head gt       lt meta charset  utf-8  gt       lt title gt  lt  title gt       lt link rel  icon  href  favicon ico  gt       lt link rel  stylesheet  href  custom css  gt     lt  head gt     lt body gt       lt div ng-include src   view 01 html   gt  lt  div gt       lt div ng-include src   view 02 html   gt  lt  div gt       lt script src  angular min js  gt  lt  script gt     lt  body gt   lt  html gt

User · Answer

For those who are looking for the shortest possible  item renderer  solution from a partial  so a combo of ng-repeat and ng-include    lt div ng-repeat  item in items  ng-include src   views partials item html     gt   Actually  if you use it like this for one repeater  it will work  but won t for 2 of them  Angular  v1 2 16  will freak out for some reason if you have 2 of these one after another  so it is safer to close the div the pre-xhtml way    lt div ng-repeat  item in items  ng-include src   views partials item html   gt  lt  div gt

User · Answer

try this    lt div ng-app  myApp  ng-controller  customersCtrl  gt      lt div ng-include   myTable htm   gt  lt  div gt   lt  div gt    lt script gt  var app   angular module  myApp        app controller  customersCtrl   function  scope   http         http get  customers php   then function  response             scope names   response data records               lt  script gt

User · Answer

On ng-build  file not found 404  error occur  So we can use below code    lt ng-include src   views transaction test html   gt  lt  ng-include gt    insted of     lt div ng-include   views transaction test html   gt  lt  div gt

[javascript] What is the correct syntax of ng-include?

Examples related to javascript

Examples related to html

Examples related to include

Examples related to angularjs

Examples related to repeater