javascript - Angularjs Dom 在加载模板时泄漏

Question

我有一个 Angular-restful 应用程序，其中有一个如下所示的列表:

每当我单击其中一项时，我都会进行 ajax 调用来检索数据，但我也会调用此指令来加载不同的模板

    .directive('contentItem', function ($compile) { 

    var linker = function(scope, element, attrs, ctrl) {

            element.html( scope.templates[scope.rec.htmlType]);     

            $compile(element.contents())(scope);

            scope.$on("$destroy",function() {
                element.remove();                   
            }); 
    }

    return {            
        link: linker,
        scope: {
            rec:'=',
            templates: '=',             
        }
    };
})

这是我的 html

<tr ng-repeat="rec in ctrl.correctionRows">
 <td content-item rec="rec" templates="templates" ></td>
</tr>

但是这是我的时间线在 Chrome 中的样子，在单击并仅打开其中 10 个项目后，我的浏览器崩溃并且显然内存不足 我什至尝试强制 $on("$destroy"删除元素，但无论如何对我不起作用。任何想法或建议将不胜感激。我什至尝试对模板和 html 类型进行硬编码，以便删除范围

            scope: {
            rec:'=',
            templates: '=',             
        }

它并没有让事情变得更好!

现在我出于测试目的删除了该指令，因为我认为这是内存泄漏的主要来源，但事实并非如此!现在我只有一个 Accordion ，里面有 3 个内部 ng-repeat 和小 Controller !但这仍然是我获得输出的方式

Answer 1

好吧，毕竟我将 angularjs 升级到了 1.4，并且还更改为 templateCache 和 templateUrl，是的!它不再泄漏，也不会导致浏览器崩溃。这是我的新指令

.directive('hymn', function($compile) {
    return {
      restrict: 'E',
      templateUrl: function(elem, attrs) {
          return attrs.templateUrl;
      }
    }
})

并且由于 templateUrl 每次从 GUI 调用时都会出现错误我刚刚在 html 页面中添加了一个有趣的标记，如下所示

<td ng-switch="rec.htmlType">           
       <hymn ng-switch-when="input" template-url="app/correction/templates/htmltype/input.html"  ></hymn> 
       <hymn ng-switch-when="label" template-url="app/correction/templates/htmltype/label.html"  ></hymn> 
       <hymn ng-switch-when="check" template-url="app/correction/templates/htmltype/check.html"  ></hymn> 
       <hymn ng-switch-when="datepicker" template-url="app/correction/templates/htmltype/datepicker.html"  ></hymn>           
       <hymn ng-switch-when="typeahead-country" template-url="app/correction/templates/htmltype/typeahead-country.html"  ></hymn> 
       <hymn ng-switch-default template-url="app/correction/templates/htmltype/input.html"  ></hymn> 
    </td>

可能看起来不漂亮，但实际上不泄漏并且工作正常!