Angularjs 如何根据传递的数据生成将在运行时加载HTML模板的templateURL？_Angularjs

Angularjs 如何根据传递的数据生成将在运行时加载HTML模板的templateURL？

angularjs

Angularjs 如何根据传递的数据生成将在运行时加载HTML模板的templateURL？,angularjs,Angularjs,我是以它工作得很好。现在我试着将这个概念扩展如下 app.js var app = angular.module('app', []); app.controller('Ctrl', function ($scope) { var EmpData = [{ "EmpId": 1, "EmpName": "Michale Sharma" }, { "EmpId": 2, "EmpName": "Sunil Das"

我是以

它工作得很好。现在我试着将这个概念扩展如下

app.js

var app = angular.module('app', []);
app.controller('Ctrl', function ($scope) {  

    var EmpData = [{
      "EmpId": 1,
      "EmpName": "Michale Sharma"
    }, {
      "EmpId": 2,
      "EmpName": "Sunil Das"
    }
  ];
  var DeptData= [{
    "Deptid": 4,
    "Deptname": "IT"
  }, {
    "Deptid": 1,
    "Deptname": "HR"
  }];

    $scope.customer = {
      EmployeeRelatedData: EmpData,
      DepartmentRelatedData: DeptData
    }; 
});

app.directive('myCustomer', function() {
  return {
    templateUrl: function(elem, attr){
      return attr.type+'.html';
    }
  };
});

index.html

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />       
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <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-app="app" ng-controller="Ctrl">  

    <div ng-controller="Ctrl">

    <!-- Section for Employee -->
      <div my-customer type="EmployeeRelatedData">

        <table border="1">
          <thead>
              <tr>
                  <th>Employee Id</th>
                  <th>Employee Name</th>                 
              </tr>
          </thead>
          <tbody>
            <tr ng-repeat="x in customer.EmployeeRelatedData"></tr>
          </tbody>
        </table> 

        </div>

      <!-- Section for Department -->
      <div my-customer type="DepartmentRelatedData">

        <table border="1">
          <thead>
              <tr>
                  <th>Department Id</th>
                  <th>Department Name</th>                 
              </tr>
          </thead>
          <tbody>
            <tr ng-repeat="x in customer.DepartmentRelatedData"></tr>
          </tbody>
        </table>        

      </div>

    </div>

</body>

</html>

<tr>
      <td>{{customer.EmpId}}</td>
      <td>{{customer.EmpName}}</td>     
</tr>

<tr>
      <td>{{customer.Deptid}}</td>
      <td>{{customer.Deptname}}</td>     
</tr>


文件。写（“”）；
员工Id
员工姓名
部门Id
部门名称

EmployeeRelatedData.html

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />       
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <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-app="app" ng-controller="Ctrl">  

    <div ng-controller="Ctrl">

    <!-- Section for Employee -->
      <div my-customer type="EmployeeRelatedData">

        <table border="1">
          <thead>
              <tr>
                  <th>Employee Id</th>
                  <th>Employee Name</th>                 
              </tr>
          </thead>
          <tbody>
            <tr ng-repeat="x in customer.EmployeeRelatedData"></tr>
          </tbody>
        </table> 

        </div>

      <!-- Section for Department -->
      <div my-customer type="DepartmentRelatedData">

        <table border="1">
          <thead>
              <tr>
                  <th>Department Id</th>
                  <th>Department Name</th>                 
              </tr>
          </thead>
          <tbody>
            <tr ng-repeat="x in customer.DepartmentRelatedData"></tr>
          </tbody>
        </table>        

      </div>

    </div>

</body>

</html>

<tr>
      <td>{{customer.EmpId}}</td>
      <td>{{customer.EmpName}}</td>     
</tr>

<tr>
      <td>{{customer.Deptid}}</td>
      <td>{{customer.Deptname}}</td>     
</tr>


{{customer.EmpId}
{{customer.EmpName}

DepartmentRelatedData.html

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />       
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <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-app="app" ng-controller="Ctrl">  

    <div ng-controller="Ctrl">

    <!-- Section for Employee -->
      <div my-customer type="EmployeeRelatedData">

        <table border="1">
          <thead>
              <tr>
                  <th>Employee Id</th>
                  <th>Employee Name</th>                 
              </tr>
          </thead>
          <tbody>
            <tr ng-repeat="x in customer.EmployeeRelatedData"></tr>
          </tbody>
        </table> 

        </div>

      <!-- Section for Department -->
      <div my-customer type="DepartmentRelatedData">

        <table border="1">
          <thead>
              <tr>
                  <th>Department Id</th>
                  <th>Department Name</th>                 
              </tr>
          </thead>
          <tbody>
            <tr ng-repeat="x in customer.DepartmentRelatedData"></tr>
          </tbody>
        </table>        

      </div>

    </div>

</body>

</html>

<tr>
      <td>{{customer.EmpId}}</td>
      <td>{{customer.EmpName}}</td>     
</tr>

<tr>
      <td>{{customer.Deptid}}</td>
      <td>{{customer.Deptname}}</td>     
</tr>


{{customer.Deptid}
{{customer.Deptname}

我正在寻找输出

我犯的错误是什么，而我却不能得到它？

谢谢。

您犯了一些错误，请参见这里的工作演示

您需要将您的客户传递到指令范围，这样您就可以通过装箱隔离范围来做到这一点

 scope: {

      customer: '=myCustomer'
    },

在你看来

my-customer="x"

由于x是您的客户

在

tr

中没有

td

，您希望在哪里看到数据…那么如何做…我需要做哪些更改…如果您能帮助我，我将不胜感激。。。我尝试了很长一段时间…但无法让它工作创建一个plunkr。。。提供播放链接hi@sylvester，感谢您的帮助..但输出/显示部分不符合方式，我正在寻找.....@priyanka.sarkar我很抱歉您不能将2个ng REPETER放在一行中以获得您示例中的表格，您可以将控制器或样式表中的数据与css合并，以获得该结果。请参见此处，非常感谢……还有更多需要向您学习的内容。我会用另一种方式尝试；如果我被卡住了，我会让你知道的。我基本上会按照你表现出来的方式去做。说真的，到目前为止你帮了我很多。