Как изменить URL-адрес шаблона во время выполнения в AngularJS?

Я имею в app.jsКак изменить URL-адрес шаблона во время выполнения в AngularJS?

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' 
    } 
    }; 
});

И мой index.html как под

<!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="[email protected]"></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>

Теперь проблема заключается в том, что

В зависимости от значения переключателя case, шаблонURL должен быть изменен.

например

если х = 1, templateURL = EmpDept.html

если х = 2, templateURL = MarkFin.html

Можете ли вы сказать, как это сделать?

N.B. ~ Я видел this, но не смог подключиться к приложению. Любой другой простой способ?

источник

2015-03-28 priyanka.sarkar

Я добавил plunker, который позволяет динамически менять шаблон адресов

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

Вы должны добавить переменную, которая хранит ссылку HTML в рамках директивы, как вы можете увидеть ниже:

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

    } 

    }; 
});

источник

2015-03-28 15:18:55 Yeager

У меня есть еще один вопрос, который я написал (может помочь вам) http://stackoverflow.com/questions/29404424/how-to-make-the-templateurl-that-will-load-the-html-template -at-runtime-based-on –

Я посмотрю на него, чтобы узнать, могу ли я помочь. можете ли вы поддержать этот ответ, пожалуйста. благодаря – Yeager

Как изменить URL-адрес шаблона во время выполнения в AngularJS?

ответ

Смежные вопросы