AngularJs 在替换表格行时 - 从编译函数更改 html 但范围未链接 - IT屋-程序员软件开发技术分享社区
首页 其他开发 AngularJs 在替换表格行时 - 从编译函数更改 html 但范围未链接
AngularJs 在替换表格行时 - 从编译函数更改 html 但范围未链接
[英] AngularJs while replacing the table row - changing html from compile function but scope is not getting linked
本文介绍了AngularJs 在替换表格行时 - 从编译函数更改 html 但范围未链接的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在这里，我试图通过指令和编译函数替换表行.不知何故，范围没有链接到新添加的模板.这是非常简单的代码.在此处创建了 plnkr:http://plnkr.co/edit/toAxkoLkWSIxYJU06iuW?p=preview
<html ng-app="plunker"><头><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 src="app.js"></script>--><身体><h1>独立 </h1><!-- <row></row>--><h1>在表中</h1><表格><tr><td>第 1 行 </td></tr><tr sda-data-embed='true' 行><td>我的行在这里</td></tr><tr><td>第 4 行<脚本>var app = angular.module('plunker', []);app.directive('row', function($compile) {var template = '<tr><td>第2行:这很好</td></tr><tr><td>第3行:{{name.firstName}}</td></tr>';返回 {限制:'EA'，替换:真的，范围:{}，/*模板:函数(元素，属性){var templ = 模板；如果(！attrs.sdaDataEmbed){模板 = '<表>'+ 模板 + '';}返回模板；},*/编译:函数(元素，属性){//$scope.firstName = 'Y';var templ = 模板；如果(！attrs.sdaDataEmbed){模板 = '<表>'+ 模板 + '';}element[0].outerHTML = 模板；},控制器:['$scope', DataController]}功能数据控制器($范围){$scope.name = {};$scope.name.firstName = '天哪';}}); </html>UPDATE :后来我找到了如何替换表格行，不确定是否推荐但它有效！我替换了，从链接函数编译了 html 元素.这是代码.
<html ng-app="plunker"><头><meta charset="utf-8"/><title>AngularJS Plunker</title><脚本>document.write('<base href="' + document.location + '"/>');<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 src="app.js"></script>--><身体><h1>独立 </h1><div><我的行></我的行><h1>在表中</h1><表格><tr><td>第 1 行</td></tr><tr sda-data-embed='true' my-row><td>我的行在这里</td></tr><tr><td>第4行</td></tr><脚本>var app = angular.module('plunker', []);app.directive('myRow', function($compile) {var template = '<tr><td>第2行:这很好</td></tr><tr><td>第3行:{{name.firstName}}</td></tr>';返回 {限制:'EA'，替换:真的，范围: {}，链接:函数(范围，元素，属性){var templ = 模板；如果(！attrs.sdaDataEmbed){模板 = '<表>'+ 模板 + '';}var e = $compile(templ)(scope);element.replaceWith(e);},控制器:['$scope', DataController]}功能数据控制器($范围){$scope.name = {};$scope.name.firstName = '天哪';}});</html>
解决方案
在你的编译函数中而不是执行 HTML 操作返回一个具有 pre 和 post 属性的对象
compile: function compile(tElement, tAttrs, transclude) {返回 {pre: 函数 preLink(scope, iElement, iAttrs, controller) { ... },post: 函数 postLink(scope, iElement, iAttrs, controller) { ... }}//或者//返回函数 postLink( ... ) { ... }}然后在 pre: 函数上执行 html 操作，这将允许您操作 dom 预链接
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屋！
查看全文
