Angular ui-router在相同状态的子视图之间传递数据

Question

如何访问处于相同状态的其他子视图.我正在构建一个顶部有一个工具栏的页面和一个侧边栏,我想要一个工具栏上的按钮来打开/关闭边栏中的侧边栏和按钮来更改内容.很简单它都在同一个控制器中,但我所做的是使用ui-router的子视图功能,如下所示:

.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'
      }
    }
  })

UI看起来像这样:

Answer 1

定义解析并将其用作存储激活的"破折号"状态的公共数据的位置.

app.config(function($stateProvider) {
  $stateProvider.state('dash', {
    url: '/',
    resolve: { 
      dashData: function() { 
        return { input: "default value" }; 
      } 
    },
    views: {
      nav: {
        controller: function() {

        },
        controllerAs: 'ctrl',
        template: '<h3>This is the Navbar</h3>'
      },
      sidebar: {  
        controller: function(dashData) { // Inject reference to resolve object
          this.dashData = dashData; 
        },
        controllerAs: 'ctrl',
        template: 'content data visible in ' + 
                     'the sidebar: <b>{{ ctrl.dashData.input }}<b>'
      },
      content: {
        controller: function(dashData) { // Inject reference to resolve object
          this.dashData = dashData;
        },
        controllerAs: 'ctrl',
        template: '<input type="text" ng-model="ctrl.dashData.input">' + 
                  'This is bound to dashData.input'
      }
    }
  })
});

将共享对象注入每个控制器

app.controller('DashCtrl', function(dashData, $scope) {
  $scope.dashData = dashData;
});
app.controller('... ....

我把这个例子放在了一个plunker中:http://plnkr.co/edit/8M1zXN0W5ybiB8KyxvqW？p = preview

Answer 2

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

抽象状态可以有子状态但不能被激活。“抽象”状态只是一种无法转换到的状态。当其后代之一被激活时，它会被隐式激活。

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

然后特别是这个用例：

将 $scope 对象继承到子代

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

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

现在，您可以在抽象父状态的控制器中的子状态中存储您需要的逻辑（和数据）：

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/

我很乐意回答您的任何问题，只是大喊大叫。祝你好运！