AngularJs而更换表行 - 从编译功能，但是范围变化的HTML是没有得到链接 [英] AngularJs while replacing the table row - changing html from compile function but scope is not getting linked
本文介绍了AngularJs而更换表行 - 从编译功能，但是范围变化的HTML是没有得到链接的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在这里，我想通过指令来替换表行和编译功能。不知何故，范围并不链接到新添加的模板。
这里是非常简单code。
创建一个plnkr这里： http://plnkr.co/edit/toAxkoLkWSIxYJU06iuW?p=preVIEW
＆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;链接rel =stylesheet属性HREF =style.css文件/＆GT;
＆所述;脚本数据需要=angular.js@1.3.xSRC =的https：//$c$c.angularjs.org/1.3.15/angular.js数据semver =1.3.15＆GT ;＆LT; / SCRIPT＆GT;
＆所述;！ - ＆下; SCRIPT SRC =app.js＆GT;＆下; /脚本＆GT - →;
＆LT; /头＆GT; ＆LT;身体GT;
＆LT; H1＆GT;单独＆LT备用; / H1＆GT;
＆LT;！ - ＆LT;排＆GT;＆LT; /行＆GT;
- ＆GT;
＆所述; H1＆gt;在表＆所述; / H1＆GT; ＆LT;表＆gt;
＆所述; TR＆GT;＆下; TD＆GT;第1行＆LT; / TD＆GT;＆LT; / TR＆GT;
＆LT; TR SDA-数据嵌入='真正的'行＆GT;＆LT; TD＆gt;我行去此处＆lt; / TD＆GT;＆LT; / TR＆GT;
＆所述; TR＆GT;＆下; TD＆GT;行4℃; / TD＆GT;＆LT; / TR＆GT;
＆LT; /表＆gt; ＆LT;脚本＆GT;
VAR应用= angular.module（'plunker'，[]）;app.directive（'行'，函数（$编译）{ 变种模板='＆所述; TR＆GT;＆下; TD＆GT;行2：这是好的＆下; / TD＆GT;＆下; / TR＆GT;＆下; TR＆GT;＆下; TD＆GT;行3：{{name.firstName}}＆下; / TD＆GT; ＆LT; / TR＆GT;'; 返回{
限制：EA，
更换：真实，
范围：{}，
/ *模板：功能（元素，ATTRS）{
VAR TEMPL =模板;
如果（！attrs.sdaDataEmbed）{
TEMPL ='＆LT;表＆gt;' +模板+'＆LT; /表＆gt;';
}
返回TEMPL;
} * /
编译：功能（元素，ATTRS）{
//$scope.firstName ='Y';
VAR TEMPL =模板;
如果（！attrs.sdaDataEmbed）{
TEMPL ='＆LT;表＆gt;' +模板+'＆LT; /表＆gt;';
}
元素[0] .outerHTML = TEMPL;
}，
控制器：['$范围，DataController类]
} 功能DataController类（$范围）{
$ scope.name = {};
$ scope.name.firstName ='天哪';
}
}）; ＆LT; / SCRIPT＆GT; ＆LT; /身体GT;＆LT; / HTML＆GT;
更新：后来我发现如何更换表行，不知道建议，但它的作品！
我更换，从编译链接功能的HTML元素。
这里是code。
＆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;
文件撰写（'＆LT;基本href =+ document.location +'/＆GT;'）;
＆LT; / SCRIPT＆GT;
＆LT;链接rel =stylesheet属性HREF =style.css文件/＆GT;
＆所述;脚本数据需要=angular.js@1.3.xSRC =的https：//$c$c.angularjs.org/1.3.15/angular.js数据semver =1.3.15＆GT ;＆LT; / SCRIPT＆GT;
＆所述;！ - ＆下; SCRIPT SRC =app.js＆GT;＆下; /脚本＆GT - →;
＆LT; /头＆GT;＆LT;身体GT;
＆LT; H1＆GT;单独＆LT备用; / H1＆GT;
＆LT; DIV＆GT;
＆LT;我行＆GT;＆LT; /我行＆GT;
＆LT; / DIV＆GT; ＆所述; H1＆gt;在表＆所述; / H1＆GT; ＆LT;表＆gt;
＆所述; TR＆GT;
＆LT; TD＆GT;行1 LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; TR SDA-数据嵌入=真我行＆GT;
＆LT; TD＆gt;我行去此处＆lt; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD＆GT;行4℃; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt; ＆LT;脚本＆GT;
VAR应用= angular.module（'plunker'，[]）; app.directive（'myRow'，函数（$编译）{ 变种模板='＆所述; TR＆GT;＆下; TD＆GT;行2：这是好的＆下; / TD＆GT;＆下; / TR＆GT;＆下; TR＆GT;＆下; TD＆GT;行3：{{name.firstName}}＆下; / TD＆GT; ＆LT; / TR＆GT;'; 返回{
限制：EA，
更换：真实，
范围： {}，
链接：功能（范围，元素，ATTRS）{
VAR TEMPL =模板;
如果（！attrs.sdaDataEmbed）{
TEMPL ='＆LT;表＆gt;' +模板+'＆LT; /表＆gt;';
}
变种E = $编译（TEMPL）（范围）;
element.replaceWith（E）;
}，
控制器：['$范围，DataController类]
} 功能DataController类（$范围）{
$ scope.name = {};
$ scope.name.firstName ='天哪';
}
}）;
＆LT; / SCRIPT＆GT;＆LT; /身体GT;＆LT; / HTML＆GT;
的
解决方案
在你的编译功能，而不是做的HTML操作返回与pre和后属性的对象。
编译：编译功能（tElement，tAttrs，transclude）{
返回{
pre：函数$ P $砰砰（范围，iElement，iAttrs控制器）{...}，
岗位：功能postLink（范围，iElement，iAttrs控制器）{...}
}
// 要么
//返回功能postLink（...）{...}
}
然后在pre执行HTML操作：功能，这将让你操作DOM pre-链接
https://docs.angularjs.org/api/ng/service/ $编译
Here, I am trying to replace the table row through directive and compile function. Somehow, the scope is not linking to newly added template. Here is the really simple code. Created a plnkr here: http://plnkr.co/edit/toAxkoLkWSIxYJU06iuW?p=preview
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
<!-- <script src="app.js"></script>-->
</head>
<body>
<h1> stand alone </h1>
<!-- <row></row>
-->
<h1>in table</h1>
<table>
<tr><td> Row 1</td></tr>
<tr sda-data-embed='true' row><td>my row goes here</td></tr>
<tr><td> Row 4</td></tr>
</table>
<script>
var app = angular.module('plunker', []);
app.directive('row', function($compile) {
var template = '<tr><td>Row 2: This is good</td></tr><tr><td>Row 3: {{name.firstName}}</td></tr>';
return {
restrict: 'EA',
replace: true,
scope:{},
/*template: function(element, attrs) {
var templ = template;
if (!attrs.sdaDataEmbed) {
templ = '<table>' + template + '</table>';
}
return templ;
},*/
compile: function(element, attrs) {
//$scope.firstName = 'Y';
var templ = template;
if (!attrs.sdaDataEmbed) {
templ = '<table>' + template + '</table>';
}
element[0].outerHTML = templ;
},
controller: ['$scope', DataController]
}
function DataController($scope) {
$scope.name = {};
$scope.name.firstName = 'Gosh';
}
});
</script>
</body>
</html>
UPDATE : Later I found how to replace the table row, not sure if it is recommended but it works! I replaced, compiled the html element from link function. here is the code.
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
<!-- <script src="app.js"></script>-->
</head>
<body>
<h1> stand alone </h1>
<div>
<my-row></my-row>
</div>
<h1>in table</h1>
<table>
<tr>
<td>Row 1</td>
</tr>
<tr sda-data-embed='true' my-row>
<td>my row goes here</td>
</tr>
<tr>
<td>Row 4</td>
</tr>
</table>
<script>
var app = angular.module('plunker', []);
app.directive('myRow', function($compile) {
var template = '<tr><td>Row 2: This is good</td></tr><tr><td>Row 3: {{name.firstName}}</td></tr>';
return {
restrict: 'EA',
replace: true,
scope: {},
link: function(scope, element, attrs) {
var templ = template;
if (!attrs.sdaDataEmbed) {
templ = '<table>' + template + '</table>';
}
var e = $compile(templ)(scope);
element.replaceWith(e);
},
controller: ['$scope', DataController]
}
function DataController($scope) {
$scope.name = {};
$scope.name.firstName = 'Gosh';
}
});
</script>
</body>
</html>
解决方案
in your compile function instead of doing the HTML manipulation return an object with the pre and post properties
compile: function compile(tElement, tAttrs, transclude) {
return {
pre: function preLink(scope, iElement, iAttrs, controller) { ... },
post: function postLink(scope, iElement, iAttrs, controller) { ... }
}
// or
// return function postLink( ... ) { ... }
}
then perform the html manipulation on the pre: function this will allow you to manipulate the dom pre-link
https://docs.angularjs.org/api/ng/service/$compile
这篇关于AngularJs而更换表行 - 从编译功能，但是范围变化的HTML是没有得到链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
