Контроллер загружается дважды с помощью пользовательского интерфейса ui-router + custom

Question

Я пытаюсь принести на свою домашнюю страницу пользовательскую директиву, которая выведет мне некоторые результаты. На вкладке сети в моем devtools я только что увидел, что мой контроллер загружается дважды.

контроллер:

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

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

директива:

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

UI-роутер сообщает:

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

Я просто хочу использовать мой homeCtrl в директиве, но кажется, что провайдер состояний загружает его и заставляет загружаться дважды. Если я удаляю контроллер из директивы, я не получаю доступ к homeCtrl, если я удаляю homeCtrl из stateprovider, чем у меня нет доступа в home.tpl.php

home.tpl.php:

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

любая идея?

Answer 1

Собственно проблема связана со следующими шагами:

• UI-роутер начинает обрабатывать URL '/'
• ui-router создайте экземпляр 'homeController'
• ui-router отображает представление 'app / home / home.tpl.php'
• Angular видеть использование пользовательской директивы - 'league-tabs'
• Директива 'league-tabs' создает экземпляр 'homeController'
• "Лиги-вкладки" отображают представление "app / home / home.tpl.php"

Вы можете выбрать любое из следующих возможных решений:

• Измените контроллер для "лиг-вкладок" на что-то особенное
• Удалить использование контроллера из определения состояния ui-router

Answer 2

Вы можете попробовать это http://plnkr.co/edit/LG7Wn5OGFrAzIssBFnEE?p=preview

Приложение

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

    }]);

контроллер

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

Посмотреть

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

директива

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

Директивный вид

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