angularjs - AngularJS: 異なるモジュールからのネストされた名前付きビュー

Question

angular-ui-router を使用して、ネストされた名前付きビューをロードしています。

index.html ファイルには、名前のないビューと名前の付いたビューがあります。

インデックス.html:

<div ui-view="header"></div>       
<div ui-view=""></div>

名前付きビューheaderに header.html をロードします。ヘッダー ビューには、 contactsSearchとcountriesという名前の 2 つのビューがあります。

Header.html:

 <div ui-view="contactsSearch"></div>
 <div ui-view="countries"></div>

index.html ファイルの名前のないビューで、contacts.html をロードしたいと考えています。

Contacts.html:

Contacts List

myApp、countries、contactsの3 つのモジュールを使用します。各モジュールのルートを構成しました。

MyAppモジュール:

angular.module('myApp', ['ui.state', 'contacts', 'countries'])
.config(['$stateProvider', '$routeProvider',  
    function ($stateProvider, $routeProvider) {
    $stateProvider
        .state("home",
        {
            url: "/home",
            abstract: true,
            views: {
                'header': {
                    template: "<div class ='row' ui-view ='countriesList'></div><div class ='row' ui-view ='contactsSearch'></div>"
                },
                "": {
                    template: "<div ui-view></div>"
                }
            }
        }); 

    }]);

国モジュール:

angular.module('countries', ['ui.state'])
.config(['$stateProvider', '$routeProvider',  
    function ($stateProvider, $routeProvider) {
    $stateProvider
        .state("home.countries", {
            url: "/countries",
            views: {
                'countriesList': {
                    template: "<p>Countries</p>"
                }
            }
        });

    }])
    .run(['$rootScope', '$state', '$stateParams', function ($rootScope,   $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
        $state.transitionTo('home.countries');
    }]);

連絡先モジュール:

angular.module('contacts', ['ui.state'])
.config(['$stateProvider', '$routeProvider',  
    function ($stateProvider, $routeProvider) {
    $stateProvider
        .state("home.contacts", {//should be loaded to the unnamed view in index.html
            url: "",
            views: {
                'contactsList': {
                    template: "<p>Contacts List</p>"
                }
            }
        })
        .state("home.contactsSearch", {
            url: "/contactsSearch",
            views: {
                'contactsSearch': {
                    template: "<p>Contacts Search</p>"
                }
            }
        });

    }])
    .run(['$rootScope', '$state', '$stateParams', function ($rootScope,   $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
        $state.transitionTo('home.contactsSearch');
    }]);

何も表示されず、理由がわからないため、コードが正しくありません。調査の結果、親は 1 つの状態しか持てないことがわかりましたが、home.contacts、home.contactsSearch、およびhome.countriesが同じ親であるhomeを持つ必要があります。

誰かがこれで私を助けてくれますか?

詳細については、jsfiddle を作成しました: https://jsfiddle.net/cjtnmbjw/3/

ありがとうございました