对角范围隔离概念工作时面临的问题 [英] Problems facing while working on Isolated Scope concept of Angular
本文介绍了对角范围隔离概念工作时面临的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想延长的<一个例子/答案（由@sylwester给出） href=\"http://stackoverflow.com/questions/29283892/how-to-make-reusable-component-using-isolated-scope-in-angularjs\">question我问。现在，我必须做这样的事情。
我迄今所做的？
app.js
VAR应用= angular.module（'plunker'，[]）;app.controller（'MainCtrl'，函数（$范围）{ VAR ARR1 = [
{EMPID：1，EmpName：Michale夏尔马，性别：男，时代：25，工资：10000}，
{EMPID：2，EmpName：苏尼尔达斯，性别：男，时代：24，工资：5000}，
{EMPID：3，EmpName：罗宾潘迪，性别：男，时代：35，工资：45000}，
{EMPID：4，EmpName：蒙娜·辛格，性别：女，时代：27日，工资：12000} ];
VAR ARR2 = [
{DEPTID：4，DEPTNAME：IT}，
{DEPTID：1，DEPTNAME：HR}，
{DEPTID：3，DEPTNAME：HW}，
{DEPTID：2，DEPTNAME：HW4}
]; VAR解析度=合并（ARR1，ARR2，EMPID，DEPTID）; $ scope.Employee = {
EmployeeName：res.EmpName，
EmployeeSex：res.gender
}; $ scope.Department = {
DepartmentName的：res.Deptname
}; //console.log(res）;}）。
指令（myCustomer'，函数（）{
返回{
限制：'E'，
范围： {
客户：'=' }，
templateUrl：我的客户的加vojta.html
}; }）; 功能合并（ARR1，ARR2，为prop1，prop2）
{
//警报（合并中）;
返回arr1.map（函数（项目）{
VAR P =项目[为prop1]
VAR EL = arr2.filter（函数（项目）{
退货项目[prop2] ===磷;
}）;
如果（el.length === 0）{
返回null;
}
VAR解析度= {};
对于（项变种I）{
如果（我！==为prop1）{
RES [I] =项[I]
}
}
对（在埃尔变种的i1 [0]）{
如果（I1！== prop2）{
水库[I1] =埃尔[0] [I1];
}
}
返回水库;
}）过滤器（功能（EL）{返回埃尔== NULL;}）;
}
的index.html
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=plunker＆GT; ＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8/＆GT;
＆LT;标题＆GT; AngularJS Plunker＆LT; /标题＆GT;
＆LT;脚本＆GT;的document.write（'＆LT;基本href =+ document.location +'/＆GT;'）;＆LT; / SCRIPT＆GT;
＆LT;链接HREF =style.css文件的rel =stylesheet属性/＆GT;
＆所述;脚本数据semver =1.3.15SRC =的https：//$c$c.angularjs.org/1.3.15/angular.js数据需要=angular.js@1.3.x＆GT ;＆LT; / SCRIPT＆GT;
＆所述; SCRIPT SRC =app.js＆GT;＆下; /脚本＆GT;
＆LT; /头＆GT; ＆LT;机身NG控制器=MainCtrl＆GT; ＆LT;表边框=1＆GT; ＆所述; TR＆GT; ＆LT; TD＆GT; EmployeeNames的＆LT; / TD＆GT;
＆LT; TD＆GT;性别与LT; / TD＆GT;
＆LT; TD＆GT;工程＆LT; / TD＆GT; ＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT;我的客户的客户=雇员＆GT;＆LT; /我的客户的＆GT;
＆LT;我的客户的客户=部门＆GT;＆LT; /我的客户的＆GT; ＆LT; / TR＆GT; ＆LT; /表＆gt;
＆LT; /身体GT;＆LT; / HTML＆GT;
我的客户的加vojta.html （我被困在这里考虑其他的事情是正确的。我同样知道，李是不正确的使用方法。但是，我DONOT知道该怎么做和怎么做）
＆LT; H3＆GT;员工-部＆LT; / H3 GT＆;
＆LT;李NG重复=EMP在customer.Employee＆GT;
＆下，P纳克-如果=emp.EmployeeName＆GT; {{emp.EmployeeName}}＆下; / P＆GT;
＆下，P纳克-如果=emp.EmployeeSex＆GT; {{emp.EmployeeSex}}＆下; / P＆GT;
＆LT; /李＆GT;＆LT;李NG重复=部门在customer.Department＆GT;
＆下，P纳克-如果=dept.DepartmentName＆GT; {{dept.DepartmentName}}＆下; / P＆GT;
＆LT; /李＆GT;
请帮忙。
解决方案
请参阅下面的演示
\r
\r\r
\r VAR应用= angular.module（'应用'，[]）;\r
\r
app.controller（'MainCtrl'，函数（$范围）{\r
\r
变种ARR1 = [{\r
EMPID：1，\r
EmpName：Michale夏尔马\r
性别：男，\r
时代：25，\r
工资：10000\r
}，{\r
EMPID：2，\r
EmpName：苏尼尔达斯\r
性别：男，\r
时代：24，\r
工资：5000\r
}，{\r
EMPID：3，\r
EmpName：罗宾潘迪\r
性别：男，\r
时代：35，\r
工资：45000\r
}，{\r
EMPID：4，\r
EmpName：蒙娜·辛格\r
性别女，\r
时代：27，\r
工资：12000\r
}\r
\r
];\r
变种ARR2 = [{\r
DEPTID：4，\r
DEPTNAME：IT\r
}，{\r
DEPTID：1，\r
DEPTNAME：HR\r
}，{\r
DEPTID：3，\r
DEPTNAME：HW\r
}，{\r
DEPTID：2，\r
DEPTNAME：HW4\r
}];\r
\r
$ scope.res =合并（ARR1，ARR2，EMPID，DEPTID）;\r
}）;\r
app.directive（'myCustomer'，函数（）{\r
返回{\r
限制：AE，\r
范围： {\r
客户：'= myCustomer\r
\r
}，\r
更换：真实，\r
templateUrl：customerTmpl.html'，\r
链接：功能（范围）{\r
的console.log（范围）\r
}\r
};\r
}）;\r
\r
功能合并（ARR1，ARR2，为prop1，prop2）{\r
//警报（合并中）;\r
返回arr1.map（函数（项目）{\r
VAR P =项目[为prop1]\r
VAR EL = arr2.filter（函数（项目）{\r
退货项目[prop2] ===磷;\r
}）;\r
如果（el.length === 0）{\r
返回null;\r
}\r
VAR解析度= {};\r
对于（项变种I）{\r
如果（我！==为prop1）{\r
RES [I] =项[I]\r
}\r
}\r
对（在埃尔变种的i1 [0]）{\r
如果（I1！== prop2）{\r
水库[I1] =埃尔[0] [I1];\r
}\r
}\r
返回水库;\r
}）。过滤器（功能（EL）{\r
返回埃尔== NULL！;\r
}）;\r
} \r
＆LT;链接HREF =// maxcdn.bootstrapcdn.com/bootstrap/3.3 0.4 / CSS / bootstrap.min.css的rel =stylesheet属性/＆GT;\r
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js＆GT;＆下; /脚本＆GT;\r
\r
＆LT;机身NG-应用=应用程序NG控制器=MainCtrl＆GT;\r
\r
＆LT;表类=表的表条纹＆GT;\r
＆LT;＆TBODY GT;\r
＆LT; TR NG重复=客户资源中的我的客户的=客户＆GT;＆LT; / TR＆GT;\r
＆LT; / TBODY＆GT;\r
＆LT; /表＆gt;\r
\r
\r
＆LT;脚本类型=文/ NG-模板ID =customerTmpl.html＆GT;\r
＆所述; TR＆GT;\r
＆所述; TD＆GT; {{customer.EmpName}}＆下; / TD＆GT;\r
＆所述; TD＆GT; {{customer.gender}}＆下; / TD＆GT;\r
＆所述; TD＆GT; {{customer.age}}＆下; / TD＆GT;\r
＆所述; TD＆GT; {{customer.salary}}＆下; / TD＆GT;\r
＆所述; TD＆GT; {{customer.Deptname}}＆下; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆LT; / SCRIPT＆GT;\r
＆LT; /身体GT; \r
I am trying to extend the example/answer (given by @sylwester) of the question I asked. Now I have to do something like this
What I have done so far?
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
var arr1 = [
{"EmpId":1,"EmpName":"Michale Sharma","gender":"Male","age":25,"salary":10000},
{"EmpId":2,"EmpName":"Sunil Das","gender":"Male","age":24,"salary":5000},
{"EmpId":3,"EmpName":"Robin Pandey","gender":"Male","age":35,"salary":45000},
{"EmpId":4,"EmpName":"Mona Singh","gender":"Female","age":27,"salary":12000}
];
var arr2 = [
{"Deptid":4,"Deptname":"IT"},
{"Deptid":1,"Deptname":"HR"},
{"Deptid":3,"Deptname":"HW"},
{"Deptid":2,"Deptname":"HW4"}
];
var res = merge(arr1, arr2, "EmpId", "Deptid");
$scope.Employee = {
EmployeeName:res.EmpName,
EmployeeSex:res.gender
};
$scope.Department = {
DepartmentName:res.Deptname
};
//console.log(res);
}).
directive('myCustomer', function() {
return {
restrict: 'E',
scope: {
customer: '='
},
templateUrl: 'my-customer-plus-vojta.html'
};
});
function merge(arr1, arr2, prop1, prop2)
{
//alert("in merge");
return arr1.map(function(item){
var p = item[prop1];
var el = arr2.filter(function(item) {
return item[prop2] === p;
});
if (el.length === 0) {
return null;
}
var res = {};
for (var i in item) {
if (i !== prop1) {
res[i] = item[i];
}
}
for (var i1 in el[0]) {
if (i1 !== prop2) {
res[i1] = el[0][i1];
}
}
return res;
}).filter(function(el){return el !== null;});
}
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>
<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-controller="MainCtrl">
<table border="1">
<tr>
<td>EmployeeNames</td>
<td>Gender</td>
<td>Works For</td>
</tr>
<tr>
<my-customer customer="Employee"></my-customer>
<my-customer customer="Department "></my-customer>
</tr>
</table>
</body>
</html>
my-customer-plus-vojta.html (I am stuck here considering other things are correct. I equally know that li is not the correct way to use. However, i donot know what to do and how to do)
<h3>Employee-Department</h3>
<li ng-repeat="emp in customer.Employee">
<p ng-if="emp.EmployeeName">{{emp.EmployeeName}}</p>
<p ng-if="emp.EmployeeSex">{{emp.EmployeeSex}}</p>
</li>
<li ng-repeat="dept in customer.Department">
<p ng-if="dept.DepartmentName">{{dept.DepartmentName}}</p>
</li>
Please help.
解决方案
Please see demo below
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
var arr1 = [{
"EmpId": 1,
"EmpName": "Michale Sharma",
"gender": "Male",
"age": 25,
"salary": 10000
}, {
"EmpId": 2,
"EmpName": "Sunil Das",
"gender": "Male",
"age": 24,
"salary": 5000
}, {
"EmpId": 3,
"EmpName": "Robin Pandey",
"gender": "Male",
"age": 35,
"salary": 45000
}, {
"EmpId": 4,
"EmpName": "Mona Singh",
"gender": "Female",
"age": 27,
"salary": 12000
}
];
var arr2 = [{
"Deptid": 4,
"Deptname": "IT"
}, {
"Deptid": 1,
"Deptname": "HR"
}, {
"Deptid": 3,
"Deptname": "HW"
}, {
"Deptid": 2,
"Deptname": "HW4"
}];
$scope.res = merge(arr1, arr2, "EmpId", "Deptid");
});
app.directive('myCustomer', function() {
return {
restrict: 'AE',
scope: {
customer: '=myCustomer'
},
replace: true,
templateUrl: 'customerTmpl.html',
link: function(scope) {
console.log(scope)
}
};
});
function merge(arr1, arr2, prop1, prop2) {
//alert("in merge");
return arr1.map(function(item) {
var p = item[prop1];
var el = arr2.filter(function(item) {
return item[prop2] === p;
});
if (el.length === 0) {
return null;
}
var res = {};
for (var i in item) {
if (i !== prop1) {
res[i] = item[i];
}
}
for (var i1 in el[0]) {
if (i1 !== prop2) {
res[i1] = el[0][i1];
}
}
return res;
}).filter(function(el) {
return el !== null;
});
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="MainCtrl">
<table class="table table-striped">
<tbody>
<tr ng-repeat="customer in res" my-customer="customer"></tr>
</tbody>
</table>
<script type="text/ng-template" id="customerTmpl.html">
<tr>
<td>{{customer.EmpName}}</td>
<td>{{customer.gender}}</td>
<td>{{customer.age}}</td>
<td>{{customer.salary}}</td>
<td>{{customer.Deptname}}</td>
</tr>
</script>
</body>
这篇关于对角范围隔离概念工作时面临的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
