angularjs $范围.$父母奇怪的层次结构

Question

我正在尝试访问我的子控制器中的$ parent想法？

父控制器

angular.module('App')
.controller('HomeController', ['$scope', '$rootScope', 'user',
    function($scope, $rootScope, user) {
        $rootScope.currentNav   = 'home';
        $rootScope.currentUser  = user.data;
        $scope.tabs = [
            {
                heading     : 'Empresas',
                template    : 'home_companies_tab.html'
            },
            {
                heading     : 'Tickets',
                template    : 'home_tickets_tab.html'
            }
        ];
        $scope.companies = []
        $scope.selectedCompanyIndex = undefined;
        $scope.selectedCompany      = undefined;
        $scope.selectedTicketIndex  = undefined;
        $scope.selectedTicket       = undefined;
    }]);

儿童控制器

angular.module('App')
.controller('HomeCompaniesTabController', ['$scope', 'Companies',
    function($scope, Companies) {
        $scope.loadCompanies = function () {
            $scope.companies = Companies.query();
        }
        /**
         * Init
         */
        $scope.selectCompany = function (company, index) {
            $scope.$parent.selectedCompanyIndex = index; //this doesnt work
            $scope.$parent.$parent.$parent.$parent.$parent.selectedCompany      = company; //this does, why?
            console.log($scope);
        }
        if($scope.currentUser.security < 3) {
            $scope.loadCompanies();
        }
    }]);

家庭模板

<div ng-include="'dist/templates/header.html'"></div>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            company : {{selectedCompany}}
        </div>
    </div>
    <tabset>
        <tab ng-repeat="tab in tabs" heading="{{tab.heading}}">
            <div ng-include="'dist/templates/' + tab.template" ></div>
        </tab>
    </tabset>

</div>

儿童模板

<div class="row-fluid" ng-controller="HomeCompaniesTabController">
<div class="col-md-3">
    <h4>Lista de Empresas</h4>
    <hr/>
    <div class="list-group">
        <a
                href=""
                class="list-group-item"
                ng-repeat="company in companies"
                ng-click="selectCompany(company, $index)">
            <h4 class="list-group-item-heading">
                {{company.name}}
            </h4>
        </a>
    </div>
</div>
<div class="col-xs-9">
    <div ng-show="selectedCompany">
        <h4><b>{{selectedCompany.name}}</b></h4>
    </div>
</div>

Answer 1

根据charlietfl的评论，我想出了这项简单的服务来共享数据

angular.module('App')
.factory('SharedData', [function () {
    return {
    }
}]);

然后我只将其注入控制器

angular.module('App')
.controller('HomeController', ['$scope', '$rootScope', 'user', 'SharedData',
    function($scope, $rootScope, user, SharedData) {
        $rootScope.currentNav   = 'home';
        $rootScope.currentUser  = user.data;
        $scope.sharedData = SharedData;
        $scope.tabs = [
            {
                heading     : 'Empresas',
                template    : 'home_companies_tab.html'
            },
            {
                heading     : 'Tickets',
                template    : 'home_tickets_tab.html'
            }
        ];
        $scope.companies = [];
    }]);