angularjs - Angular ui-router 在相同状态的 subview 之间传递数据

Question

如何访问处于相同状态的其他 subview 。我正在构建一个顶部带有工具栏和侧边栏的页面，我希望工具栏上的按钮可以打开/关闭侧边栏和侧边栏中的按钮来更改内容。很容易都在同一个 Controller 中，但我所做的是使用 ui-router 的 subview 功能，如下所示:

.state('dash', {
    url: '/dash/:id',
    views: {
      nav: {
        controller: 'NavCtrl',
        controllerAs: 'ctrl',
        templateUrl: '/views/navbar.html'
      },
      sidebar: {
        controller: 'SidebarCtrl',
        controllerAs: 'ctrl',
        templateUrl: '/views/sidebar.html'
      },
      content: {
        controller: 'DashCtrl',
        controllerAs: 'ctrl',
        templateUrl: '/views/dash.html'
      }
    }
  })

用户界面如下所示:

Answer 1

这将是抽象父状态派上用场的一个很好的例子:

An abstract state can have child states but can not get activated itself. An 'abstract' state is simply a state that can't be transitioned to. It is activated implicitly when one of its descendants are activated.

https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views#abstract-states

然后尤其是这个用例:

inherit $scope objects down to children

考虑以下抽象父状态及其子状态:

$stateProvider.state('root', {
    abstract: true,
    url: '/dash',
    templateUrl: 'root.html',
    controller: 'rootController'
});

$stateProvider.state('dash', {
    parent: 'root',
    url: '/:id',
    views: {
        'navbar': {
            templateUrl: 'navbar.html',
            controller: 'navbarController'
        },
        'sidebar': {
            templateUrl: 'sidebar.html',
            controller: 'sidebarController'
        },
        'content': {
            templateUrl: 'content.html',
            controller: 'contentController'
        }
    }
});

现在您可以在抽象父状态的 Controller 中的子状态中存储所需的逻辑(和数据):

angular.module('app').controller('rootController', [
             '$scope',
    function ($scope) {
        $scope.sidebar = {
            show: true
        };
        $scope.items = [{
            name: 'Alpha'
        }, {
            name: 'Bravo'
        },{
            name: 'Charlie'
        },{
            name: 'Delta'
        }];
        $scope.selected = $scope.items[0];
        $scope.select = function (item) {
            $scope.selected = item;
        }
    }
]);

在子状态模板 sidebar.html 中使用此逻辑/数据的示例:

<ul class="nav nav-pills nav-stacked">
    <li ng-repeat="item in items" role="presentation">
        <a href="#" ng-click="select(item)">{{item.name}}</a>
    </li>
</ul>

这是您要求的完整示例，我可以在此处发布所有代码，但我认为这有点太多了:

http://embed.plnkr.co/2jKJtFM0GWsylyLcAdne/

我很乐意回答你可能有的任何问题，只是大声喊叫。祝你好运!