【问题标题】:How to change template URL at runtime in AngularJS?如何在运行时在 AngularJS 中更改模板 URL?
【发布时间】:2015-03-28 14:03:59
【问题描述】:

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

而我的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="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>

现在的问题是

根据 switch case 的值,必须更改 templateURL。

例如

如果 x=1,则 templateURL = EmpDept.html

如果 x=2,则 templateURL = MarkFin.html

你能告诉我怎么做吗?

注意~我见过this,但无法插入应用程序。还有其他简单的方法吗?

【问题讨论】:

    标签: angularjs


    【解决方案1】:

    我添加了一个允许您动态更改模板 URL 的插件

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

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-01-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多