2

estou tendo um problema muito estranho e gostaria que se alguém compreender minha dúvida, pudesse me explicar o porque disso acontecer.

A minha aplicação é um player e essa é composta por alguns timeouts para controles de inicio e fim das mídias (ele toca video, imagens, canvas, e nossas midias proprias)

Meu index html é muito simples, composto somente por isso:

<html ng-app="app">
<head>
    <title>app</title>
    <meta charset="UTF-8">
</head>

<body ng-controller="bodyCtrl" ng-keyup="processKey($event.keyCode)">
    <div ng-include="page"></div>
    <div class="containerMenu" ng-show="menu.isOpenned">
        <div ng-include="menu.templateUrl"></div>
        <span us-spinner spinner-key="spinner-1"></span>
    </div>
    <div ng-include="'views/fonts.html'"></div>
    <div ng-include="'views/debug.html'" ng-if="isDebug"></div>
</body>
</html>

Minha dúvida é o seguinte: Quando eu insiro uma página dentro do include <div ng-include="page"></div> o que acontece com o controller que já estava ali?

Por exemplo: Tenho a pagina A e a pagina B, ambas possuem um controller. Quando inicio minha aplicação carrego a pagina A. Lógica vem e lógica vai é preciso carregar a página B.

A página A executa um timeout quando uma imagem vai ser exibida:

var playImage = function(media) {
  setTimeout(start, (media.duration * 1000));
}

var start = functon() {
 //vai pegar a proxima imagem e mandar exibir
}

Por algum motivo, preciso sair do controller A que é responsável pela exibição e ir para a página B que é o controller de menus. E logo depois mudo o include novamente para a página A. É possível que por causa do timeout, eu tenha 2 instancias ou 2 lógicas rodando simultaneamente no controller A?

1
  • Você mantendo o controller: bodyCtrl no body, ele vai ser sempre carregado, independente da pagina acessada. Então, como você está carregando um controller para cada página, em cada pagina terá seu controller + o bodyCtrl. 9/11/2016 às 20:29

1 Resposta 1

1

O controller continua instanciado porém invisível, como o teste abaixo pode provar:

angular.module('myApp', [])
.controller('paiCtrl', function($scope){
  $scope.targetUrl = null;
}).controller('aCtrl', function($scope){

  var playImage = function(media) {
    setTimeout(start, (media * 1000));
  }

  var start = function() {
    console.log('A');
    playImage(5);
  }
  
  playImage(1);

        console.log('Controller A carregado');

}).controller('bCtrl', function($scope){
      console.log('Controller B carregado');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>


<div ng-app="myApp">



  <script type="text/ng-template" id="a.html">
    <div ng-controller="aCtrl">Controle A</div>
  </script>  

  <script type="text/ng-template" id="b.html">
    <div ng-controller="bCtrl">Controle B</div>
  </script>  

  <div ng-controller='paiCtrl'>
    <button ng-click="targetUrl = 'a.html'">A</button>
    <button ng-click="targetUrl = 'b.html'">B</button>
    {{targetUrl}}

    <div ng-include='targetUrl'></div>
  </div>
</div>

Se A for inicialmente carregado seguido de B, você perceberá que o evento continua sendo disparado:

inserir a descrição da imagem aqui

3
  • Perfeito, era exatamente isso que acontecia. Minha solução foi quando eu troco o controller, o evento ondestroy é disparado e eu limpo todos os timeouts. 10/11/2016 às 16:31
  • Sobre isso: "O controller continua instanciado porém invisível". Acontece para todos os controllers ou só nesse caso que continha timeouts chamando funções dele? Digo, se voce removesse o controller B, ele também continuaria instanciado ? 10/11/2016 às 16:34
  • @PauloGustavo Sim, porque a função sendo chamada (playImage) não é destruída junto com o escopo da função. Caso você queira garantir que os recursos alocados sejam dispensados, utilize this.playImage = [...]` ou $scope.playImage = [...].
    – OnoSendai
    10/11/2016 às 16:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .