Controller called twice when used with angular material tabs

Question

My controller gets called twice when I am using angular material tabs.

The tabs:

<div layout="column" flex="">
  <md-content id="content">
    <md-tabs md-dynamic-height="" md-selected="selectedIndex" md-border-bottom="" md-autoselect="">
      <md-tab label="Home" ui-sref="home">
        <div ui-view=""></div>
      </md-tab>
      <md-tab label="Contact" ui-sref="contact">
        <div ui-view=""></div>
      </md-tab>
    </md-tabs>
  </md-content>
</div>

The controllers:

(function () {
    'use strict';

    angular
        .module('app.contact')
        .controller('ContactController', ContactController);

    function ContactController() {
        var vm = this;

        activate();

        function activate() {
          console.log('Contact Controller');
        }

    }
})();

(function () {
    'use strict';

    angular
        .module('app.home')
        .controller('HomeController', HomeController);

    function HomeController() {
        var vm = this;

        activate();

        function activate() {
          console.log('Home Controller');
        }

    }
})();

The states:

(function () {
    'use strict';

    angular.module('app', [
    ])
        .config(configBlock);

    function configBlock($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise("/home");

      $stateProvider
        .state('home', {
            url: "/home",
            templateUrl: "home.html",
            controller: 'HomeController',
            controllerAs: 'vm'
        })
        .state('contact', {
            url: "/contact",
            templateUrl: "contact.html",
            controller: 'ContactController',
            controllerAs: 'vm'
        });
    }

})();

Plunker

Moncef Hassein-bey · Accepted Answer · 2015-09-13 14:19:48Z

1

This is, because you are using ui-view two times.

answered Sep 13, 2015 at 14:19

Moncef Hassein-bey

1,3619 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sohan Shirodkar Over a year ago

Even if <ui-view> was used once, the controller would have been called twice. I am also encountering this problem. Looking for some good explanation and solution to this issue.

Janak Bhatta · Accepted Answer · 2016-01-22 11:47:53Z

0

i also hav the same issue use the ng-include instead of the ng-view

<md-tab label="Issues" >   
    <ng-include src="'/app/src/project/task/task.tpl.html'"></ng-include>
    <!-- <div ui-view></div> -->
</md-tab>

answered Jan 22, 2016 at 11:47

Janak Bhatta

6456 silver badges6 bronze badges

Collectives™ on Stack Overflow

Controller called twice when used with angular material tabs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related