AngularJS:指令中未绑定的值
Posted
技术标签:
【中文标题】AngularJS:指令中未绑定的值【英文标题】:AngularJS : values not binded in directive 【发布时间】:2017-12-24 19:28:04 【问题描述】:我正在尝试在我的 AngularJS 应用程序中使用此代码 https://***.com/a/20096401/2542165 作为指令。此代码合并包含相同值的连续单元格(具有行跨度)。
我的表是使用 ng-repeat 生成的,我的问题是,在我的指令中,比较值是 "item.value1"
和 "item.value2"
,而不是实际值。
在下面的示例中,最后两行合并,但不应该。
var app = angular.module('plunker', []);
app.controller('DemoController', function ($scope)
$scope.items =
[
"value1":"value1",
"value2":"value2",
,
"value1":"value1",
"value2":"value4",
]
);
app.directive('mergeTable', [function()
return
restrict: 'A',
link: function(scope, element, attrs)
function merge()
var mergeTableColIndex = attrs.mergeTableColIndex;
var table = element;
var rows = table.find($("tr"));
var colsLength = $(rows[0]).find($("td")).length;
var removeLater = [];
for (var i = 0; i < colsLength; i++)
if(mergeTableColIndex.indexOf(i) !== -1)
var startIndex = 0;
var lastIndex = 0;
var startText = $($(rows[0]).find("td")[i]).text();
for (var j = 1; j < rows.length; j++)
var cRow = $(rows[j]);
var cCol = $(cRow.find("td")[i]);
var currentText = cCol.text();
if (currentText == startText)
removeLater.push(cCol);
lastIndex = j;
else
var spanLength = lastIndex - startIndex;
if (spanLength >= 1)
$($(rows[startIndex]).find("td")[i]).attr("rowspan", spanLength + 1);
lastIndex = j;
startIndex = j;
startText = currentText;
spanLength = lastIndex - startIndex;
if (spanLength >= 1)
$($(rows[startIndex]).find("td")[i]).attr("rowspan",
spanLength + 1);
for(i in removeLater)
$(removeLater[i]).remove();
scope.$watch(attrs.mergeTable, function(value)
merge();
);
;
]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="DemoController">
<table border="1" merge-table-col-index='[0,1,2]' merge-table='items'>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>c</td>
</tr>
<tr ng-repeat='item in items'>
<td>item.value1</td>
<td>item.value2</td>
</tr>
</table>
</div>
</body>
</html>
【问题讨论】:
【参考方案1】:解决方案是在调用 merge() 之前等待 angular 渲染,使用 $evalAsync :
scope.$watch(attrs.mergeTable, function(value)
scope.$evalAsync(function()
merge();
);
);
【讨论】:
以上是关于AngularJS:指令中未绑定的值的主要内容,如果未能解决你的问题,请参考以下文章