Controllers in includes AngularJS 1

Question

Controllers in includes AngularJS 1

Navigation

#1 by (1 votes)

2

I'm having a very strange problem and would like it if someone understands my question, could you explain why that happens.

My application is a player and this is composed of some timeouts for start and end controls of the media (it plays video, images, canvas, and our own media)

My html index is very simple, composed only of this:

<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>

My question is this: When I insert a page inside the include <div ng-include="page"></div> what happens to the controller that was already there?

For example: I have the A page and the B page, both have a controller. When I start my application I load the A page. Logic comes and logic is going to need to load the B page.

The A page performs a timeout when an image is displayed:

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

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

For some reason, I need to exit the A controller that is responsible for the display and go to the B page that is the menu controller. And then I change the include again to the A page. Is it possible that because of the timeout, I have 2 instances or 2 logics running simultaneously on the controller A ?

angularjs

asked by anonymous 09.11.2016 / 17:40

1 answer

Error adding APP compilation to iTunes Connect How to search in a String and replace X with a number and use the same to calculate?

score 1 · Accepted Answer

The controller is still instantiated but invisible, as the test below can prove:

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><divng-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>

If A is initially loaded followed by B, you will notice that the event continues to fire: