控制器在与 angular material 个选项卡一起使用时调用两次

Question

当我使用 angular material 个选项卡时，我的控制器被调用了两次。

选项卡：

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

控制器：

(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');
        }

    }
})();

州：

(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

Answer 1

这是因为您使用了两次 ui-view。

Answer 2

我也有同样的问题使用 ng-include 而不是 ng-view

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

控制器在与 angular material 个选项卡一起使用时调用两次

Controller called twice when used with angular material tabs

angularjs

angular-ui-router

angular-material