3

angular jsでメモリリークを引き起こすNG-IF！写真: https://www.mediafire.com/?ojoc55ccnyqlxyb

私のアプリには2つのページがあります

最初のページは、検索への入力を表示するホームページです

2 ページ目はメモリを解放するための空のページです。

リークをどのように検出しましたか?
リンクからアプリを実行します: http://www.mediafire.com/download/y5f6f326f3zo0ch/LeakProject_-_Copy.7z
クロムを匿名モードで使用し、F12 -> プロファイル -> ヒープ割り当てを記録します。ホームページをクリックした後、空のページをクリックしてさらに時間を繰り返すと、結果はリークしません。

しかし、検索するものを入力すると、その後、メモリを解放するために emptypage に移動します。漏れます。

空のページに移動すると、ホームページの ovNgListBox のスコープが破壊されることがわかりました。scope.textSearch の値が undefined に変わり、angualr.js の ng-if で $scope.$watch が実行されてスコープが破棄されると思います。しかし、何かが逆です: html のスコープですが

<ov-ng-list-box class="ng-isolate-scope"><div ng-init="showFilter=true" class="pull-right">

破壊されます。

しかし、範囲

 <input type="text" ng-model="textSearch" ng-if="showFilter" placeholder="please type here to search..." class="search ng-scope ng-pristine ng-valid">

壊れていません。どうして？

scope.showFilter の値を false に変更しても、in-if の $scope.$watch は呼び出されません。

スニペット コード:

// templateleak.html <br/>

    <div class="pull-right" ng-init="showFilter=true" >
      <input type="text" class="search" placeholder="please type here to search..." ng-if="showFilter" ng-model="textSearch"/>
    </div>

// my directive
app.directive('ovNgListBox', [function () {
    return {
      restrict: 'AE',
      scope: {},
      templateUrl: 'views/template/templateLeak.html',
      controller: ['$scope',function(scope){
        console.log("Im in link of directive");
        scope.textSearch='';
        scope.search = function(){};
        scope.$on('$destroy', function(){
            scope.showFilter=false;
        });
      }]
    };
  }])


//angular.js
var ngIfDirective = ['$animate', function($animate) {
  return {
    transclude: 'element',
    priority: 600,
    terminal: true,
    restrict: 'A',
    $$tlb: true,
    link: function ($scope, $element, $attr, ctrl, $transclude) {
        var block, childScope, previousElements;
        $scope.$watch($attr.ngIf, function ngIfWatchAction(value) {

          if (toBoolean(value)) {
            if (!childScope) {
//
4

1 に答える 1

1

クリーンアップ関数を使用して angular.element オブジェクトをクリアします。

function dealoc(obj)
  {
  var jqCache = angular.element.cache;
  if (obj)
    {
    if (angular.isElement(obj))
      {
      cleanup(angular.element(obj));
      }
    else if (!window.jQuery)
      {
      // jQuery 2.x doesn't expose the cache storage.
      for (var key in jqCache)
        {
        var value = jqCache[key];
        if (value.data && value.data.$scope == obj)
          {
          delete jqCache[key];
          }
        }
      }
    }

  function cleanup(element)
    {
    element.off().removeData();
    if (window.jQuery)
      {
      // jQuery 2.x doesn't expose the cache storage; ensure all element data
      // is removed during its cleanup.
      jQuery.cleanData([element]);
      }
      // Note: We aren't using element.contents() here. Under jQuery,   element.contents() can fail
      // for IFRAME elements. jQuery explicitly uses (element.contentDocument ||
      // element.contentWindow.document) and both properties are null for IFRAMES that aren't attached
      // to a document.
var children = element[0].childNodes || [];
      for (var i = 0; i < children.length; i++)
        {
        cleanup(angular.element(children[i]));
        }
      }
    }

参考文献

于 2015-01-18T05:59:52.440 に答える