在$compile后，HTML按钮显示为文本。

23 浏览
0 Comments

在$compile后，HTML按钮显示为文本。

这个问题已经有答案了:

如何在Angularjs中在指令之外使用$compile

如果我有jQuery背景，“在AngularJS中思考”？ [关闭]

我正在尝试使用Angular的JS代码创建具有两个按钮的弹出对话框。以下代码生成按钮...

var html = $('');
var div = $compile(html);
var content = div($scope);
document.getElementById('dialogboxhead').innerHTML = "header";
document.getElementById('dialogboxbody').innerHTML = "body";
document.getElementById('dialogboxfoot').innerHTML = content;

但是，它给我提供的是下面的HTML文本而不是实际的按钮...

[[object HTMLButtonElement], [object Text], [object HTMLButtonElement]]

我是否遗漏了什么，忘记添加了什么？

HTML看起来如下...




								
admin 更改状态以发布 2023年5月20日
							

							

															

						

						
0

					

				


			


			
			

	

		

			

				2
				答案			


					


		
		

			
				
											


	

		

			

								
									
			

			

				

					

						

                        

						

														0 Comments						

					

					

															

				

				

										
这种方式混合使用AngularJS和jQuery并不明智。


这种方法的主要问题是$compile将watchers添加到指定的作用域中。这些watchers将在从DOM中删除后仍保留。这将导致内存泄漏。如果这是一个经常添加和删除的对话框 - 请注意。


但是如果你必须使用，不要使用innerHTML来附加编译后的内容：




  ̶d̶o̶c̶u̶m̶e̶n̶t̶.̶g̶e̶t̶E̶l̶e̶m̶e̶n̶t̶B̶y̶I̶d̶(̶'̶d̶i̶a̶l̶o̶g̶b̶o̶x̶f̶o̶o̶t̶'̶)̶.̶i̶n̶n̶e̶r̶H̶T̶M̶L̶ ̶=̶ ̶c̶o̶n̶t̶e̶n̶t̶;̶
  var foot = document.getElementById('dialogboxfoot');
  $(foot).append(content);





DEMO演示



angular.module("app",[])
.controller("ctrl",function($scope, $compile) {
  var html = $(' ');
  var div = $compile(html);
  var content = div($scope);
  document.getElementById('dialogboxhead').innerHTML = "header";
  document.getElementById('dialogboxbody').innerHTML = "body";
  var foot = document.getElementById('dialogboxfoot');
  $(foot).append(content);
})














									

				

									

			

			
0

		

	



											


	

		

			

								
									
			

			

				

					

						

                        

						

														0 Comments						

					

					

															

				

				

										
$compile方法接受一个字符串参数，如果你想以这种方式提供标记。


避免用任何东西（如$(..)）包装$compile的输入。相反，直接将html字符串传递给$compile()方法，同时通过DOM append()方法附加div，你会发现这将按预期工作：




var html = '';
var div = $compile(html);
...
document.getElementById('dialogboxfoot').append( div[0] );





有关更多信息，请参见官方文档中的用法。


这里是一个链接到一个可工作的jsFiddle

									

				

									

			

			
0