Controller loaded twice using ui-router + custom directive

Question

I am trying to bring to my homepage a custom directive which will print me some output. In the network tab in my devtools I just saw that my controller loads twice.

controller:

var homeController = function($log,leaguesFactory){
        var self = this;
        self.leagues = [];

            leaguesFactory.loadLeagues()
                .then(function(leagues){
                    self.leagues = leagues.data.Competition;
                });
        self.message= 'test message';
};

directive:

var leaguesTabs = function(){
        return {
            restrict : 'E',
            templateUrl : 'app/home/leagues-tabs.tpl.php',
            scope: {
                leagues: '='
            },
            controller: 'homeController',
            controllerAs: 'homeCtrl'
        };
};

ui-router states:

$stateProvider
            .state('home',{
                url : '/',
                templateUrl : 'app/home/home.tpl.php',
                controller : 'homeController',
                controllerAs: 'homeCtrl'
            })...

I just want to use my homeCtrl in the directive, but it seems that the state provider loads it also and make it load twice. If I remove the controller from the directive then I don't get access to the homeCtrl, if I remove the homeCtrl from the stateprovider than I don't have access in the home.tpl.php

home.tpl.php:

<div>
    <leagues-tabs></leagues-tabs>
</div>

any idea?

Answer 1

Actually problem related to next steps:

• ui-router start handling url '/'
• ui-router create an instance of 'homeController'
• ui-router render the view 'app/home/home.tpl.php'
• Angular see usage a custom directive - 'leagues-tabs'
• 'leagues-tabs' directive create an instance of 'homeController'
• 'leagues-tabs' render the view 'app/home/home.tpl.php'

You can follow any of next possible solutions:

• Change controller for 'leagues-tabs' to something special
• Remove controller usage from ui-router state definition

Answer 2

You can try this one http://plnkr.co/edit/LG7Wn5OGFrAzIssBFnEE?p=preview

App

    var app = angular.module('app', ['ui.router', 'leagueTabs']);

UI Router

    app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/leagues');
        $stateProvider
            .state('leagues', {
                url: '/leagues',
                templateUrl: 'partial-leagues.html',
                controller: 'LeaguesController',
                controllerAs: 'ctrl'
            });

    }]);

Controller

    app.controller('LeaguesController', ['$http', function($http) {
        var self = this;
        $http.get('leagues.json').success(function(data){
            self.leagues = data;
        })
    }]);

View

    <div>
      <league-tabs leagues="ctrl.leagues"></league-tabs>
    </div>

Directive

    var leagueTabs = angular.module('leagueTabs', []);
    leagueTabs.directive('leagueTabs', function(){
        return {
            restrict : 'E',
            templateUrl : 'partial-league-tabs.html',
            scope: {
                leagues: '='
            },
            controller: 'LeagueTabsController',
            controllerAs: 'leagueTabs'
        }
    });
    leagueTabs.controller('LeagueTabsController', function($scope){
        var self = this
        $scope.$watch('leagues', function(leagues){
            self.leagues = leagues;
        })
    })

Directive View

    <div>
       <ul ng-repeat="league in leagueTabs.leagues">
         <li>{{league.name}}</li>
       </ul>
    </div>