Question

我使用的是AngularJS 1.5.8和ui-router，我左边有一个菜单，右边有一个内容区域。

我希望能够在菜单系统中导航，而无需更新内容＆＃39; ui-view，这可能吗？

在我的index.html中，我有两个ui-views

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

然后在我的设置路由文件中，我有以下内容;

settingsRoute = function($stateProvider, $urlRouterProvider){
    $stateProvider
        .state('settings', {
            url: '/settings',
            views: {
                "menu": {templateUrl: 'templates/settings.html'}
            }
        })
        .state('account', {
            url: "/account",
            views: {
                "menu": {templateUrl: 'templates/settings.html'},
                "content": {
                    templateUrl: 'templates/account.html',
                    controller: 'account'
                }
            }
        });
    $urlRouterProvider.otherwise('/account');
}

在我的成本核算路线档案中

costingsRoute = function($stateProvider){
    $stateProvider
        .state('costings', {
            url: '/costings',
            views: {
                "menu": {templateUrl: 'templates/costings.html'}
            }
        })
        .state('invoices', {
            url: '/invoices',
            views: {
                "menu": {templateUrl: 'templates/costings.html'},
                "content": {
                    templateUrl: 'templates/invoices.html'
                }
            }
        })
}

angular.module('app').config(costingsRoute);

例如，在下面的演示文章加载时，当我点击＆＃39;成本核算时，加载内容中显示的帐户正文。我希望只更改菜单并将内容视图保留在内容视图中的任何内容，这可能是帐户主体＆＃39;或者＆＃39;个人资料＆＃39;。

https://plnkr.co/f7A773GJdu3NWy3Lg2eK

Answer 1

将此添加到您的成本核算视图...

https://plnkr.co/edit/Q2nXXWpSywkdEUKIUmC0?p=preview

.state('costings', {
            url: '/costings',
            views: {
                "menu": {templateUrl: 'costings.html'},
                "content": {
                    templateUrl: 'account.html'
                }
            }
        })

名为ui-views的angularjs只更新了一个ui-view

1 个答案: