How to change template URL at runtime in AngularJS?

Question

I have in app.js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  // Fetch the data from the API calls   
  var empDept =  GetEmployeeData();
  var marFin = GetFinanceData();

   var x = 1;
   $scope.list = {};
   switch(x)
   {
    case 1: $scope.list = {
        EmployeeDepartment: empDept
      }; break;
      case 2:
        $scope.list = {
        MarketingFinance: marFin
      };break;
   }   
});

app.directive('myCustomer', function() {
  return {
    restrict: 'AE',
    scope: {
      customer: '=myCustomer'

    },
    replace: true,
    templateUrl: 'EmpDept.html'
    }
  };
});

And my index.html is as under

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>    
    <script data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js" data-require="angular.js@1.3.x"></script>
    <script src="app.js"></script>   
  </head>

  <body ng-controller="MainCtrl">

     <label ng-repeat="(key,val) in list">

       <div ng-if="key === 'EmployeeDepartment'">

              <table border="1">

                <tr>          
                  <td><b>EmployeeNames</b></td>                  
                </tr>
                <tbody>
                    <tr ng-repeat="customer in val" my-customer="customer"></tr>
                </tbody>
            </table>

            <script type="text/ng-template" id="EmpDept.html">
              <tr>
                <td>{{customer.EmpName}}</td>                
              </tr>
            </script>

          </div>

          <div ng-if="key === 'MarketingFinance'">

            <table border="1">
              <tr>
                  <td><b>Product Name</b></td>
                  <td><b>Price</b></td>  
                </tr>
              <tbody>
                 <tr ng-repeat="customer in val" my-customer="customer"></tr>
              </tbody>
            </table>

            <script type="text/ng-template" id="MarkFin.html">
            <tr>
                      <td>{{customer.ProductName}}</td>
                      <td>{{customer.Price}}</td>
                    </tr>
            </script>
            </div>          

            </label>

</html>

Now the problem is that

Depending on the value of the switch case, the templateURL has to be changed.

e.g

if x=1, templateURL = EmpDept.html

if x=2, templateURL = MarkFin.html

Can you please tell how to do it?

N.B.~ I have seen this but could not plug into the application. Any other easy way?

score 0 · Accepted Answer · answered Mar 28 '15 at 15:18

I have added a plunker that allows you to dynamically change the template URL

http://plnkr.co/edit/yG5qEbFORyyNnCdVDOOY?p=preview

You must add the variable that stores the html link to the directive scope as you can see below:

app.directive('myCustomer', function() {
  return {
    restrict: 'AE',
    scope: {
      customer: '=myCustomer',
      templateHtml: "="
    },
    replace: true,
    template: '<div ng-include="templateHtml"></div>',
    link: function(scope, element, attrs) {

    }

  };
});

I have 1 more question which i posted (could u pls help) http://stackoverflow.com/questions/29404424/how-to-make-the-templateurl-that-will-load-the-html-template-at-runtime-based-on — priyanka.sarkar, Apr 02 '15 at 04:23

How to change template URL at runtime in AngularJS?

1 Answers1