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

发布时间：2020-12-17 07:43:56 所属栏目：安全来源：网络整理

导读：如何在同一状态下访问其他子视图.我正在建立一个工具栏顶部和侧边栏的页面,我想要一个工具栏上的按钮来打开/关闭边栏中的侧边栏和按钮来更改内容.很容易的在所有在同一个控制器,但我做的是使用ui-router的子视图功能,如下所示： .state('dash',{ url: '/dash

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

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

UI看起来像这样：

定义一个解决方案,并将其用作存储激活的“破折号”状态的公共数据的位置.

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

        },template: '<h3>This is the Navbar</h3>'
      },sidebar: {  
        controller: function(dashData) { // Inject reference to resolve object
          this.dashData = dashData; 
        },template: 'content data visible in ' + 
                     'the sidebar: <b>{{ ctrl.dashData.input }}<b>'
      },content: {
        controller: function(dashData) { // Inject reference to resolve object
          this.dashData = dashData;
        },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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!