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

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

抽象状态可以具有子状态但不能自行激活。一个＆＃39;摘要＆＃39;国家只是一个无法转变的国家。当其中一个后代被激活时，它会被隐式激活。

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

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

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/

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

Answer 3

如果您使用控制器命名控制器的方式不同，则可以使用sidebarCtrl模板中的NavCtrl。也许使用NavCtrl上存在的一些布尔值，它决定了侧边栏中显示的内容？（来自评论）

这应该有用，但是没试过。

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

sidebarService：

angular.module('app').value('sidebarService', {show: true});

navCtrl是这样的：

function(sidebarService){
  var vm = this;
  vm.toggleSideBar = function(){sidebarService.show = !sidebarService.show;}//used in navbar.html
}

sidebarCtrl：

function(sidebarService){
  var vm = this;
  vm.showSideBar= sidebarService;
}

然后在sidebar.html中使用侧边栏值服务：

<div ng-if="sidebarCtrl.showSideBar.show">
<!--SideBar-->
</div

Answer 4

您可以使用事件在控制器之间进行通信。检查AngularJS文档中的$scope.$broadcast和`$ scope。$ on：https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope

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

4 个答案: