why angularjs ng-include doesn't work like this

Question

I want to use a ng-template to iterate my args, that can help to build an indent menu content. but ng-include does't work for me. I have add a quote.

here is a simple sample, http://codepen.io/elvis-macak/pen/meropX

body(ng-app="app",ng-controller="MainController")

  script(type='text/ng-template', id="data-list.html")
    span {{key}}
    span {{value}}

  div
    div(ng-repeat="data in datas")
      h3 {{data.date }}
      ul      
        li(ng-repeat="(key, value) in data")
          span {{key}}
          span {{value}}
      ul
        li(ng-include, src="data-list.html", ng-repeat="(key, value) in data")

it cannot print out the script content inside.

I don't know why, can someone help me ?

Answer 1

I'm not 100% sure what you're asking, but my understanding is that you're looking to use ng-include inside your ng-repeat. I don't use Jade, but looking at some of the compiled HTML from your example:

<li ng-include="ng-include" src="'data-list.html'" ng-repeat="(key, value) in data"></li>

Your arguments for ng-include are incorrect. It should look like:

<li ng-include src="'data-list.html'" ng-repeat="(key, value) in data"></li>

Which seems to work. Be careful about using ng-include inside an ng-repeat, however, as it's bad for performance. As you evolve to more complicated needs (such as using complicated views inside ng-repeats), you'd probably want to use a directive, which is the angular way of manipulating the DOM.