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：指令中未绑定的值的主要内容，如果未能解决你的问题，请参考以下文章