如何根据传递的数据制作在运行时加载 HTML 模板的 templateURL? [英] How to make the templateURL that will load the HTML template at runtime based on the data passed?
本文介绍了如何根据传递的数据制作在运行时加载 HTML 模板的 templateURL?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在遵循
my-customer 应该在 tr 标签内而不是在表之前您需要将您的客户传递给指令作用域，以便您可以通过创建隔离作用域来实现
范围:{客户:'=我的客户'},在你看来
my-customer="x"因为 x 是您的客户
I am following the example of Template-expanding directive
It is working fine. Now I am trying to extend the concept as follows.
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>
EmployeeRelatedData.html
<tr>
<td>{{customer.EmpId}}</td>
<td>{{customer.EmpName}}</td>
</tr>
DepartmentRelatedData.html
<tr>
<td>{{customer.Deptid}}</td>
<td>{{customer.Deptname}}</td>
</tr>
I am looking for the output
What is the mistake that I am making for which I am not able to get it? Thanks.
解决方案
You've got few mistakes please see here for working demo
http://plnkr.co/edit/RQ1xWaLUAsBpNgyMWujI?p=preview
my-customer should be inside tr tag not before table
you need to pass your customer to directive scope so in you can do that by crating isolate scope
scope: {
customer: '=myCustomer'
},
and in your view
my-customer="x"
as x is your customer
这篇关于如何根据传递的数据制作在运行时加载 HTML 模板的 templateURL?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
