Javascript Angularjs Dom在加载模板时泄漏

我有一个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>

这并没有让它变得更好

现在，为了测试的目的，我删除了该指令，因为我认为这是内存泄漏的主要来源，但不是！现在我只有一个手风琴，里面有3个ng重复和小控制器！但这仍然是我获得输出的方式

---

好吧，毕竟我把angularjs升级到了1.4，也改成了templateCache和templateUrl，是的！它不再泄漏，也不会使浏览器崩溃。 这是我的新指令

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

由于templateUrl每次都有一个bug从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>

---

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

好吧，毕竟我把angularjs升级到了1.4，也改成了templateCache和templateUrl，是的！它不再泄漏，也不会使浏览器崩溃。 这是我的新指令

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

由于templateUrl每次都有一个bug从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>

---

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

你的模板里面有什么<代码>作用域.模板[scope.rec.htmlType]，递归？另外，作用域$destroy上的element.remove（）没有意义，它应该自动删除。没有模板只是一个json文件，其中包含不同的模板：{“input”：“}@YOU，例如，当我有一个htmlType输入时，我加载输入模板，如果我有复选框，我加载检查模板等等。我明白了，结帐观察者可能在增加，或者不会太多——如果$scope正在泄漏的话。你也在做$scope.$new吗？@Shilan，ng include做得很慢，但是如果你自己使用$compile，也不会更好。-你的模板里面有什么<代码>作用域.模板[scope.rec.htmlType]，递归？另外，作用域$destroy上的element.remove（）没有意义，它应该自动删除。没有模板只是一个json文件，其中包含不同的模板：{“input”：“}@YOU，例如，当我有一个htmlType输入时，我加载输入模板，如果我有复选框，我加载检查模板等等。我明白了，结帐观察者可能在增加，或者不会太多——如果$scope正在泄漏的话。你也在做$scope.$new吗？@Shilan，ng include做得很慢，但如果你自己使用$compile，也不会有太大的改进-