angularjs - 使用 ui-router + 自定义指令加载两次控制器

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-router 状态：

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

我只想在指令中使用我的 homeCtrl，但似乎状态提供程序也会加载它并使其加载两次。如果我从指令中删除控制器，那么我无法访问 homeCtrl，如果我从 stateprovider 中删除 homeCtrl，那么我无法访问 home.tpl.php

home.tpl.php：

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

任何想法？

Answer 1

实际上与后续步骤相关的问题：

• ui-router 开始处理 url '/'
• ui-router 创建一个 'homeController' 的实例
• ui-router 渲染视图'app/home/home.tpl.php'
• Angular 查看使用自定义指令 - 'leagues-tabs'
• 'leagues-tabs' 指令创建一个 'homeController' 的实例
• 'leagues-tabs' 渲染视图 'app/home/home.tpl.php'

您可以遵循任何下一个可能的解决方案：

• 将 'leagues-tabs' 的控制器更改为特殊的东西
• 从 ui-router 状态定义中删除控制器使用

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>