Render Partial File AngularJS

Question

I have the following code and I want to render my partial file inside a tab.

In my service.html

<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
    <script src="app.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="TabsDemoCtrl">


  <tabset>
    <tab heading="Justified"><div ng-include src="sunday.html"></div></tab>
    <tab heading="SJ"><div ng-include src="monday.html"></div></tab>
    <tab heading="Long Justified">Long Labeled Justified content</tab>
  </tabset>
</div>
  </body>
</html>

and in my app.js i hv the following code

angular
  .module('letsSchedulecommyApp', [
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ui.bootstrap',
    'ui.calendar',
    'ngSanitize',
    'ui.router'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/cleaning_services/homepage.html',
        controller: 'CleaningServicesCtrl'
      })
      .when('/maid-cleaners', {
        templateUrl: 'views/cleaning_services/maid_cleaning_service.html',
        controller: 'CleaningServicesCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });

  });

this is my plunkr file http://plnkr.co/edit/PgXGQFe8mDJ1lDkpEqrx

So basically, i want to click on the tab and then view the rendered partial file.

Any help appreciated.

Pankaj Parkar · Accepted Answer · 2015-04-01 18:34:04Z

2

ng-include src should be in ' single qoute, Add ng-view to get view angular $routing views on page.

HTML

<div ng-controller="TabsDemoCtrl">
  <tabset>
    <tab heading="Justified"><div ng-include src="'sunday.html'"></div></tab>
    <tab heading="SJ"><div ng-include src="'monday.html'"></div></tab>
    <tab heading="Long Justified">Long Labeled Justified content</tab>
  </tabset>
  <div ng-view>
  </div>
</div>

edited Apr 1, 2015 at 18:34

answered Apr 1, 2015 at 18:23

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

1 Comment

tymeJV Over a year ago

Or put the source into a $scope var: $scope.urlSource = "sunday.html" - ng-include="urlSource" - either way, +1

Collectives™ on Stack Overflow

Render Partial File AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related