AngularJS：指令中未绑定的值答案

【问题标题】：AngularJS : values not binded in directiveAngularJS：指令中未绑定的值
【发布时间】：2017-12-24 19:28:04
【问题描述】：

我正在尝试在我的 AngularJS 应用程序中使用此代码 https://stackoverflow.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>

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

解决方案是在调用 merge() 之前等待 angular 渲染，使用 $evalAsync ：

     scope.$watch(attrs.mergeTable, function(value) {
        scope.$evalAsync(function() {
            merge();
        });
     });

【讨论】：