Html 使用Angular ui router从其他ui视图更改ui视图

我有一个包含2个ui视图的页面，顶视图有一个表单和一些控件，底视图将由顶视图更改，但默认显示一些表

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

我知道如何将状态“tracker”（加载了“controls.html”和“content.html”的视图）更改为完整的第二状态（“controls.html”和“map.html”）

我感到困惑的是，如何只更改底部视图

content@tracker

根据俯视图中的按钮状态，在“contact.html”和“map.html”之间切换

路由器是：

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

---

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

从俯视图控制器

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

和从底部视图控制器

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

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