使用 Angular UI-router 从其他 ui-views 更改 ui-views答案

【问题标题】：Changing ui-views from other ui-views with Angular UI-router使用 Angular UI-router 从其他 ui-views 更改 ui-views
【发布时间】：2015-09-22 06:28:21
【问题描述】：

我有一个带有 2 个 ui-views 的页面，顶视图有一个表单和一些控件，底视图将被顶视图更改，但默认显示几个表格。

我决定尝试在一个状态下完成这个初始页面，我想知道在这种情况下这是否是正确的方法。该状态称为“跟踪器”，并具有包含上述内容的视图。当用户单击顶视图中的按钮时，我希望底视图显示替代内容（例如地图）。

我可以弄清楚如何将状态“tracker”（加载有“controls.html”和“content.html”的视图）更改为完整的第二个状态（“controls.html”和“map.html”）。

我感到困惑的是如何根据顶部视图中的按钮状态仅在“contact.html”和“map.html”之间更改底部视图content@tracker。

路由器是：

    (function() {

  'use strict';

  angular.module('pb.tracker').config(function($stateProvider) {
    $stateProvider.state('tracker', {
      url: '/tracker',
      controller: 'TrackerController as track',
      data: {
        pageTitle: 'Parcel Tracker',
        access: 'public',
        bodyClass: 'tracker'
      },
      views: {
        '': {
          templateUrl: 'modules/tracker/templates/tracker.html'
        },
        'controls@tracker': {
          templateUrl: 'modules/tracker/templates/tracker-controls.html'
        },
        'content@tracker': {
          templateUrl: 'modules/tracker/templates/tracker-details.html'
        }
      }
    });
  });

})();

基础页面的html是

    <div class="container">
  <div class="row spacer-top-xl">
    <div class="col-md-12">
      <div ui-view="controls"></div>
      <div ui-view="content"></div>
    </div>
  </div>
</div>

【问题讨论】：

标签： html angularjs angular-ui-router

【解决方案1】：

一种方法是使用 $broadcast 和 $on ：

从顶视图控制器..

$scope.sendBroadcast = function() {
    $rootScope.$broadcast('myAction');
}

从底部视图控制器

$scope.$on('myAction', function() {
    //Message received      
});

另一种选择可能是使用服务和 $watch 对特定值进行更改。

【讨论】：