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

Angular.js

Angular.js

angular js 指令

AngularJS简介

angularJS笔记

对于Angular表达式以及重要指令的研究心得前端实战Angular框架