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

Question

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

这是示例

http://plnkr.co/edit/OISkbF

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

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

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

Answer 1

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

你的插件的工作叉: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()            
      }          
    });
};
});

您的实现存在 2 个问题，您是:

1. 调用 $http 并期望在下面的行中得到结果，这是一个异步调用，因此我已将您的 $compile 移至成功处理程序
2. 每次加载 jsp 文件时都重用相同的范围，因此将相同的对象传递给新创建的 Controller (每次$compile它都会创建 Controller 的新实例)。我正在为每个 jsp 文件创建一个新作用域，然后在不再使用时将其销毁。

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