Question

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

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

的index.html：

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

我将header.html加载到命名视图标题。标题视图有两个命名视图 contactsSearch 和国家/地区。

header.html中：

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

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

Contacts.html：

Contacts List

我使用了三个模块： myApp ，国家/地区和联系人。我已经为每个模块配置了路由。

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。国家/地区拥有相同的父级：主页。

有人可以帮帮我吗？

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

谢谢

AngularJS：来自不同模块的嵌套命名视图

0 个答案: