AngularJS-$compile之后，html中的调用new函数被多次运行

Question

问题是，我有一个简单的指令从backed(JSP页面)获取数据(它有一个来自angular的调用函数来为js模型设置一些值，但当我得到响应时，调用函数是x倍…

这是的样品

http://plnkr.co/edit/OISkbF

当您看到控制台日志，并单击"加载表单JSP"按钮时，

首先是3次调用方法，接下来是6次。。。

这是谷歌grupe angularJS中的主题https://groups.google.com/d/msg/angular/18a_Iqkdbtk/eDuZ4OLfwJMJ

Answer 1

我在您的示例中修复了一些问题，现在它只调用函数两次(这实际上是正确的，因为$digest就是这样工作的，它会调用绑定，直到没有更改，所以每次至少调用2次。

你的plunker的工作叉：http://plnkr.co/edit/Aw6S6T?p=preview

关键部分在这里：

app.directive('angularHtmlBind', function($compile, $http) {
return function(scope, elm, attrs) {
var $elm = $(elm),
url = 'search.jsp',
html,
currentScope;
function getHTML(url) {
$http.get('search.jsp').success(function(data) {
html = data;
currentScope = scope.$new();
$elm.html(html);         
$compile($elm.contents())(currentScope);       
}).error(function(data, status, headers, config) {    
console.log(data);
}); 
}        
scope.$watch(attrs.shown, function(value) {                           
if (value) {            
getHTML(url);            
} else if (currentScope) {            
$elm.contents().remove();            
currentScope.$destroy()            
}          
});
};
});

你的实现有两个问题，你是：

1. 调用$http，并期望在下面的行中得到结果，这是一个异步调用，所以我已经将您的$编译
2. 每次加载jsp文件时重用相同的作用域，因此将相同的对象传递给新创建的控制器(每次$compile都会创建控制器的新实例)。我为每个jsp文件创建一个新的作用域，然后在不再使用时将其销毁

当然，这个例子本可以改进得更多，但我假设您多次加载示例文件只是为了说明问题；)如果没有，则调用一次，然后使用存储内容的htmlvar。