AngularJS - Load content in tab through controller

Question

I am trying to use ng-repeat and a controller to dynamically load tab content.

Controller code:

angular.module('ogn.userprefs').controller('UserprefsController', ['$scope',
    function($scope) {
        $scope.tabs = [
            { title: 'Personal Information', content: "ng-include=''modules/userprefs/views/personalinfo.html''"},
            { title: 'Sign In & Security', content: 'modules/userprefs/views/signin_security.html'},
            { title: 'Account Preferences', content: 'modules/userprefs/views/accountprefs.html'}
        ];
}]);

HTML code:

<div ng-show="subnav" class="userprefs">
  <div ng-controller="UserprefsController" class="subnav-tabs">
    <!--<tabset>
      <tab heading="Personal Information">
        <div ng-include="'modules/userprefs/views/personalinfo.html'"></div>
      </tab>
      <tab heading="Sign In &amp; Security">
        <div ng-include="'modules/userprefs/views/signin_security.html'"></div>
      </tab>
      <tab heading="Account Preferences">
        <div ng-include="'modules/userprefs/views/accountprefs.html'"></div>
      </tab>
    </tabset>-->
    <tabset>
      <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active">
        {{tab.content}}
      </tab>
    </tabset>
  </div>
</div>

The HTML code that has been commented out is how I called the content in my tab before, using hg-include. I want to switch to an ng-repeat and call it through the controller, but all that is coming up is text that follows content:. What can I replace after content to call my html pages?

Any help is appreciated! Thanks in advance!

@Meligy so the original code (commented out) uses ng-include to call my HTML pages, but when I try to call the same URL in the controller, it just comes back as text and not the page in that tab. — annabananana7
– annabananana7, Commented Nov 16, 2015 at 22:22

JstnPwll · Accepted Answer · 2015-11-16 22:27:37Z

1

You should use the <ng-include> directive and set the src attribute to your scope variable. Something like this:

<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="{{tab.active}}">
    <ng-include src="tab.content"></ng-include>
</tab>

Here's a js fiddle demonstrating the usage.

answered Nov 16, 2015 at 22:27

JstnPwll

8,7252 gold badges36 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Janko · Accepted Answer · 2015-11-16 22:40:25Z

angular.module('ogn.userprefs').controller('UserprefsController', ['$scope',
    function($scope) {
        $scope.tabs = [
            { title: 'Personal Information', content: 'personalinfo.html'},
            { title: 'Sign In & Security', content: 'signin_security.html'},
            { title: 'Account Preferences', content: 'accountprefs.html'}
        ];
}]);


<div ng-show="subnav" class="userprefs">
  <div ng-controller="UserprefsController" class="subnav-tabs">
    <tabset>
      <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active">
        <div ng-include="modules/userprefs/views/{{tab.content}}"></div>
      </tab>
    </tabset>
  </div>
</div>

This should work, but here is a little plunker i prepared with example. I guess that first index in tabs scope is messing around with double ''. Remember to download and include ui.bootstrap

icfantv · Accepted Answer · 2015-11-17 18:09:51Z

0

You should really try and either preload these templates or use custom directives as using <ng-include> creates an unnecessary watch. Also consider using one-time binding syntax for your tab array if you don't expect it to change.

answered Nov 17, 2015 at 18:09

icfantv

4,6537 gold badges42 silver badges55 bronze badges

Collectives™ on Stack Overflow

AngularJS - Load content in tab through controller

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related