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

如何访问处于相同状态的其他子视图。我正在建立一个页面，该页面的顶部是一个工具栏，一个边栏，我希望工具栏上的按钮可以打开/关闭边栏，而边栏上的按钮可以更改内容。这很容易，因为它们都在同一控制器中，但是我要做的是使用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'
      }
    }
  })

用户界面如下所示：

最佳答案

定义一个解决方案并将其用作存储激活的“破折号”状态的通用数据的地方。

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('... ....

我把这个例子放到了一个笨蛋中：http://plnkr.co/edit/8M1zXN0W5ybiB8KyxvqW?p=preview

关于angularjs - Angular ui路由器在相同状态的 subview 之间传递数据，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34291141/