1

我正在使用 angular-ui-router 加载嵌套的命名视图。

在 index.html 文件中，我有一个未命名的视图和一个命名的视图。

索引.html：

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

我将 header.html 加载到命名视图header。标题视图有两个命名视图contactsSearch和countries。

页眉.html：

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

在 index.html 文件的未命名视图中，我想加载contacts.html。

联系人.html：

Contacts List

我使用三个模块：myApp、countries和contacts。我已经为每个模块配置了路由。

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

我的代码不正确，因为没有显示任何内容，我无法弄清楚原因。经过一番调查，我发现父母只能有一个州，但我需要home.contacts，home.contactsSearch和home.countries有同一个父母：home。

有人可以帮我吗？

我创建了一个 jsfiddle 以获得更多详细信息：https ://jsfiddle.net/cjtnmbjw/3/

谢谢

4

0 回答 0