如何使这将在运行时根据传递的数据加载HTML模板templateURL？ [英] How to make the templateURL that will load the HTML template at runtime based on the data passed?
本文介绍了如何使这将在运行时根据传递的数据加载HTML模板templateURL？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我下面模板扩展指令的例子
这是工作的罚款。现在，我想如下扩展的概念。
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>
我要寻找的输出
什么是我做的，我现在无法得到它的错误呢？
谢谢你。
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=$p$ PVIEW
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'
},
和在你看来
my-customer="x"
为x是你的客户。
as x is your customer
这篇关于如何使这将在运行时根据传递的数据加载HTML模板templateURL？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
