Angular ui router - 具有动态内容的固定菜单

时间:2016-08-26 08:16:03

标签: angularjs angular-ui-router

我必须创建一个包含固定顶部菜单的页面,其中包含一些输入和按钮。

根据填写的数据和按下的按钮,菜单下方会显示包含数据的地图。

菜单将始终存在,只会更新地图。

ROUTE

$stateProvider
.state('login', {
    url : '/login',
    templateUrl : 'app/login/login.html',
    controller : 'LoginController'
})
.state('home', {
    url : '/home',
    templateUrl : 'app/home/home.html'
})
.state('menu', {
    url : '',
    templateUrl : 'app/menu/menu.html',
    parent : 'home'
});

home.html的

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

<h1 class="ui huge header">
    Please select something
</h1>

目前我只能看到“请选择一些东西”但不能看到菜单。

之后,我如何用所需的地图替换“请选择一些东西”?是否可以拥有默认视图?登陆家庭时我应该看到消息而不是地图

修改 这是我在答案后得到的内容

ROUTE

$stateProvider
.state('login', {
    url : '/login',
    views : {
        'login' : {
            templateUrl : 'app/login/login.html',
            controller : 'LoginController'
        }
    }
})
.state('home', {
    url : '/home',
    views : {
        'menu' : {
            templateUrl : 'app/menu/menu.html'
        },
        'content' : {
            templateUrl : 'app/home/home.html',
        }
    }
})
.state('home.other', {
    url : '/other',
    views : {
        'content@' : {
            templateUrl : 'app/home/home.html'
        }
    }
});

INDEX.HTML

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

<div ui-view="menu"></div>
<div ui-view="content"></div>

它运作良好,但这是最好的方法吗?我有很多不同的内容,所以我必须在每个州内复制菜单视图?

如果我的网页布局不同(没有菜单和内容) - 我应该在<div ui-view="list"></div>中添加新的index.html吗?

2 个答案:

答案 0 :(得分:1)

根据问题更新

已编辑

尝试阅读本文的Nested views以更好地了解ui-router中的现有解决方案。

以下是您可以采取的措施,以避免重复路由:

$stateProvider
.state('login', {
    url: '/login',
    views: {
        'login': {
            templateUrl: 'app/login/login.html',
            controller: 'LoginController'
        }
    }
})
.state('menu', {
    url: '/menu',
    templateUrl: 'app/menu/menu.html'
})
.state('menu.content', {
    views: {
        'default': {
            url: '/default',
            template: '<h1>Please select something</h1>'
        },
        'content1': {
            url: '/content1',
            templateUrl: 'app/content1/content1.html'
        },
        'content2': {
            url: '/content2',
            templateUrl: 'app/content2/content2.html'
        }
    }
});

您可以清楚地看到从网址中阅读和理解内部和内部的内容。如果您有网址menu/content1 - 您菜单下的意思是内容1现在可见。

答案 1 :(得分:1)

您不必为菜单定义另一个状态,只需将其添加到您的家乡状态作为另一个视图。喜欢这个

.state('home', {

    url: '/home',
    views:{

        'menu': {
            templateUrl: 'app/menu/menu.html'
        },

        'home': {
            templateUrl: 'app/home/home.html'
        }

    }
})

并将您的HTML更改为:

<div ui-view="menu"></div>
<div ui-view="home"></div>

每当您想要更新视图(保持菜单相同)时,为此视图创建一个状态,如下所示:

.state('home.newState', {

    url: '/newState',
    views:{
        'home@':{
            templateUrl: 'app/home/newState.html'
        }
    }

})

这将通过添加newState.html模板代替home.html模板来更新视图,同时保持菜单相同。