La directiva AngularJS con $ http crea pérdida de memory. ¿Resolver no parece funcionar?

Parece que tengo un problema y no creo que pueda ver la solución, tal vez alguien pueda ayudar … Tengo una directiva AngularJS que hace una request de $http que devuelve HTML y la inyecto en mi vista cuando hay contenido – Sé que esto no es genial y que el retorno de HTML debe replacese con JSON y el uso de templates, pero no tengo control sobre el contenido que se devuelve de la request $ http. La directiva toma algunos arguments / attributes para get el contenido correcto y todo parece funcionar. El directo es usualmente en 7 lugares en mi opinión, uno en mi navigation que agrego a mi índice usando ng-include, tres veces en mi pie de página que agrego a mi index.html usando ng-include y luego aparece la directiva dentro del ng-view label ng-view que tengo, la label puede aparecer de 0 a tres veces por vista. Esta es la directiva en mi HTML

 <div data-cms-inject data-page-name="homePageContent" data-slot-name="slot1"></div> 

Aquí está el JS …

 .directive('cmsInject', ['$rootScope', '$q', '$http', function ($rootScope, $q, $http) { 'use strict'; return { restrict: 'A', link: function (scope, element, attrs) { var canceller = $q.defer(), cmsPromise = $http({ url : 'url/to/feed', timeout: canceller.promise, method: 'POST', data: [{ pageName: attrs.pageName, slotName: attrs.slotName }] }); cmsPromise.success(function(data) { var resp = data[0]; if(resp.replace(/\s{1,}/,'').replace(/\r?\n|\r/g,'') !== 'null') { element.html(resp); } console.log('new request success'); $rootScope.$broadcast('cmsLoaded'); }).error(function(data) { console.log('new request error', data); }) ; $rootScope.$on('$locationChangeStart', function () { console.log('$locationChangeStart'); canceller.resolve('locationChange'); }); } }; }]) 

Ahora, parece que funciona bien, pero cuando navego rápidamente entre las vistas de mi aplicación, noto que la aplicación parece ralentizarse y luego bloquea el browser, por lo que tenemos una pérdida de memory. Al principio pensé que era debido a las llamadas $ http pendientes, pero cuando intenté resolverlas usando el time de espera y el evento '$ locationChangeStart', el problema permaneció. Luego traté de escribir en la console para ver qué pasa … esta es la salida que tengo …

Esto es cuando cargo la aplicación, tenemos 7 instancias de la directiva, 3 están dentro de la vista ng, 4 afuera en ng-incluye

 7 new request success 

Luego cambio a una nueva vista sin directivas

 7 $locationChangeStart 

Luego vuelvo a la vista original

 7 $locationChangeStart 3 new request success 

Una vez más, cambio a una nueva vista sin directivas

 10 $locationChangeStart 

Navego de vuelta a la vista original

 10 $locationChangeStart 3 new request success 

Una vez más, cambio a una nueva vista sin directivas

 13 $locationChangeStart 

y finalmente volver a la vista original

 13 $locationChangeStart 3 new request success 

Aquí hay algo extraño, ya que la cantidad de veces que se llama al evento $ locationChangeStart aumenta, más veces que la directiva aparece dentro de la página, ng-include + ng-view alguien puede ver lo que estoy haciendo mal aquí, quedan algunas drectivas en la memory / DOM, supongo?

  • ¿Cuándo se considera $ .cache demasiado grande?
  • ¿Por qué una exception causaría pérdidas de resources en Node.js?
  • El service de compilation de JS $ angular provoca $ watch de pérdida de memory
  • ¿Por qué es esto una pérdida de memory en JavaScript?
  • destruirá un dialog de jQuery, ¿eliminará cualquier controller asociado a elementos dentro de él?
  • ¿Por qué se debe anular el object para IE después de que fue document.getElementById-ed?
  • Consumo de memory de NodeJS en un ciclo infinito
  • Crea y destruye dinámicamente una escena Three.js sin pérdida de memory
  • 3 Solutions collect form web for “La directiva AngularJS con $ http crea pérdida de memory. ¿Resolver no parece funcionar?”

    Se puede explicar el creciente número de controlleres de events:

     $rootScope.$on('$locationChangeStart' 

    $rootScope un controller de events a $rootScope y eso, por supuesto, no desaparece cuando termina el ciclo de vida de la directiva. El controller de events se debe adjuntar al scope lugar.

    Mueva sus llamadas http a algún service y use ese service en su directiva. Escucha el evento de directivas '$ destory' y haz algo de limpieza si puedes.

    Su directiva crea references circulares entre los objects DOM y js. Intente evitar events bindings con rootScope y el uso de services como $ http dentro de la function de enlace de directivas. Una mejor solución es colocar esta lógica en la function de ejecución del module.

    Algo como eso:

     .run(['$rootScope', 'myService', function($rootScope, myService){ $rootScope.$on('$locationChangeStart', function () { myService.doSomethng().then(function(data){ var resp = data[0]; if(resp.replace(/\s{1,}/,'').replace(/\r?\n|\r/g,'') !== 'null') { $rootScope.$broadcast('cmsLoaded', data); } }); }); }]) .directive('cmsInject', ['$rootScope', '$q', '$http', function ($rootScope, $q, $http) { 'use strict'; return { restrict: 'A', link: function (scope, element, attrs) { scope.$on('cmsLoaded', function(e, args) { element.html(args); }) } } }]) 
    Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.