Controllers in includes Angularjs 1

Question

Controllers in includes Angularjs 1

Asked 8 years ago

Viewed 217 times

2

I am having a very strange problem and I would like if someone understands my doubt, could explain to me why it happened.

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

My html index is very simple, composed only by 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 within include <div ng-include="page"></div> what happens to the controller that was already there?

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

The page To executes a timeout when an image will be 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 get out of the controller To who is responsible for displaying and going to the page B which is the menu controller. And then I change the include again to the page To. It is possible that because of the timeout, I have 2 instances or 2 logics running simultaneously in the controller To?

You keep the controller: bodyCtrl in the body, it will always be loaded, regardless of the page accessed. So, as you are loading a controller for each page, each page will have its controller + bodyCtrl.

– Carlos Silva

2016/11/09 at 20:29

1 answer

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.

by OnoSendai • **36,218** points · Answer 1 · 2016-11-09T21:21:23+00:00

The controller remains 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>


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

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