CODEWITHSUNDEEP
htmlangularjs
ChaseHardin
ChaseHardin

Reputation: 2269

Issue Calling html With AngularJS ng-Include or Directive

I want to implement AngularJS's ng-include statement into my website to reduce code redundancy, but having trouble getting it to fully work. Currently, my index.html page is calling pageLayout.html My index.html is calling pageLayout.html successfully, but when adding a <h1> tag in index.html I cant put it on top of the pageLayout.html content that I call. Does anyone have any ideas?

Here is the link: http://plnkr.co/edit/uarelZgzmITJXg2pYXfg?p=preview

I have also tried using a directive like the following: http://plnkr.co/edit/VmAO47l7RMXTGYYFFgLB?p=preview but still having issues.

Thanks!

Upvotes: 0

Views: 138

Answers (1)

laurent
laurent

Reputation: 2620

The transclusion strategy is set to element not to true so you can not insert extra content.

Moreover the content is wiped everytime the template value changes

And using transclusion with ngInclude does not make sense

I would rather use a directive with transclusion (or bind the title) if you want to avoid code duplication, something like

directive('pageContainer',function(){
  return {
      template:'<div class="divSize" ><h1>{{title}}</h1><div ng-transclude></div></div>',
      scope:{
        title:"@"
      }
  }
})

Upvotes: 2

Related Questions