Question

我正在尝试访问我的子控制器中的$ parent但由于某种原因，我必须访问第五个$ parent才能从Parent控制器中获取实际的$ scope，Any Ideas？

家长控制器

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 = [];

    }]);

AngularJS $ scope。$ parent奇怪的层次结构

1 个答案: