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?

Actually it's really bed idea to use same controller for view and custom component. You should choose what You really want - create reusable component or managed view — Jju, May 03 '15 at 13:01
Ok, I think I just need to re-design the needs of my system, maybe I do need to separate between the component and view. — Dima Gimburg, May 03 '15 at 13:05

score 0 · Answer 1 · answered May 03 '15 at 12:59

0

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

answered May 03 '15 at 12:59

Jju

135
3

yep, I understand the problem, but is it possible to handle both home template and the leagues tab template with the same controller without changing using special controller for the directive? the second solution: to remove the controller from the ui-router, when i remove - I can't catch the scope of the home controller, it is not recognized. thanks man! – Dima Gimburg May 03 '15 at 13:02
Actually I don't understood which problem You try to solve by given behaviour. But of course You still able to create a view, that can be showed in different view like a custom component. – Jju May 03 '15 at 13:40
the problem is that I call the server (factory calls the server within the controller) twice. that's not good. I have all the data i need in the first call, the second call is just not useful. – Dima Gimburg May 03 '15 at 13:43

score 0 · Answer 2 · answered May 03 '15 at 15:54

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>

Controller loaded twice using ui-router + custom directive

2 Answers2