Angularjs 使用“共享多个视图和控制器”；离子“；在Ionic项目中查看调用

我已经在这个问题上纠缠了一个星期了，我觉得我理解了“ui路由器”和“爱奥尼亚”视图路由，但事实似乎并非如此

我已经看到了许多视图如何工作的示例，但是现在随着我的构建越来越大，我看到的示例对于我的项目来说太简单了，因为我的项目有侧菜单、选项卡和每个选项卡内容的视图

我的问题：

我的选项卡中包含多个具有不同控制器的视图。我正在使用一张传单地图和一个下拉列表，其中将填充我的位置，我将两者都用到了工作中。然而，这些观点发出了奇怪的声音。每当我选择传单地图时，它都会在我的应用程序

导航栏下的我的
菜单.html
中按下我的“发现列表”（在我的
发现主页.html
中）按钮。此外，您可以看到此列表视图位于“我的地图”和“缩放”图标之间，如果不触摸“我的地图”，我将切换选项卡并返回，我将无法再次打开列表

我认为要理解我的问题，我需要问的问题是

1。使用爱奥尼亚的视图导航在多视图应用程序中导航的正确方式是什么？

2。为什么更改视图会禁止再次调用其他控制器？

3。哪些是最佳实践？

这就是我要处理的。任何帮助都将不胜感激

“我的标签”视图在discover home.html中


菜单内的侧栏视图.html


在discover home.html中显示列表


在discover home.html中查找列表隐藏在ion导航栏下在menu.html中查找列表


以下是我的代码片段

index.html

//对于我的discover-home.html
.state（'app.discover.home'{

url: "/home",
views: {
   'home-tab': {
   templateUrl: "templates/discover-tabs/discover-home.html",
   controller:  'ActivityCntl'
       },
       'discover-home-listview': {
   templateUrl: "templates/discover-tabs/discover-home.html",

       }
}

})

菜单

这将控制侧菜单项

    <ion-side-menus enable-menu-with-back-views="false">
      <ion-side-menu-content>

//IT GETS PUSHED UNDER THIS
        <ion-nav-bar class="bar-calm">
          <ion-nav-back-button>
          </ion-nav-back-button>

          <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
            </button>
          </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="menuContent"></ion-nav-view>
      </ion-side-menu-content>

      <ion-side-menu side="left">
        <ion-header-bar class="bar-stable">
          <h1 class="title">MYApps</h1>
        </ion-header-bar>
        <ion-content>
          <ion-list>
            <ion-item menu-close ng-click="login()">
            <i class="icon ion-person"></i>
              Login
            </ion-item>
            <ion-item menu-close href="#/app/discover">
             <i class="icon ion-location"></i>
              Discover
            </ion-item>
            <ion-item menu-close href="#/app/map">
            <i class="icon ion-map"></i>
              Map
            </ion-item>

          </ion-list>
        </ion-content>
      </ion-side-menu>
    </ion-side-menus>


//它被压在这下面
我的应用程序
登录
发现
地图

<ion-view view-title="Home">


<!--SUBHEADER BUTTON: DISPLAY LISTVIEW -->
    <div ng-controller="FrostCtrl" class="bar bar-subheader button bar-balanced" ng-click="pushFrost()">
        <h2 class="title">{{title}} List</h2>
    </div>



  <!--DISPLAY OVERLAY WITH LIST-->
    <ion-pane ng-controller="OverlayCtrl" class="dark-overlay" ng-show="showOverlay">

      <ion-content class="has-subheader">

        <button class="button button-block button-outline button-balanced" ng-click="hideFrost()">Dismiss
        </button>

        <ion-list>
            <ion-item ng-repeat="item in items" class="dark-item">
              {{item.text}}
           </ion-item>
        </ion-list>

        </ion-content>
    </ion-pane>




  <!--LEAFLET MAP -->
    <leaflet class="has-subheader padding"center="nassau" paths="paths" tiles="tiles" markers="markers" defaults="defaults">
      </leaflet>


</ion-view>

          angular.module('starter.controllers', [])
            ...


    // #######| LEAFLET MAP  |#######
        .controller('ActivityCntl', [ '$scope', 'leafletData', function($scope, leafletData) {

           var tileSource = {
                onlineTiles: {
                    url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" 
                },

            };

            angular.extend($scope, {

                nassau: {
                lat: 25.074521,
                lng: -77.318191,
                zoom: 13
                .........
            });
        }])


  // #######| SHOW OVERLAY  |#######
        .controller('FrostCtrl', ['$scope', '$rootScope', '$compile', function($scope, $rootScope, $compile) {
          $scope.pushFrost = function() {
            var el = angular.element(document.getElementById('myPane'));
            el.attr('frost', '');
            el = $compile(el)($scope);
            $rootScope.showOverlay = true;
          };
        }])


    //#######| DISPLAYS CONTENTS |##########
        .controller('OverlayCtrl', function($scope, $rootScope, $compile) {
          $scope.items = [];
          for(var i = 0; i < 5; i++) {
            $scope.items.push({

              text: 'Whatever ' + (i+1)

               });
          }
          $scope.hideFrost = function() {
            $rootScope.showOverlay = false;
            var el = angular.element(document.getElementById('myPane'));
          };
        })

config(['$stateProvider', '$urlRouterProvider','$locationProvider',function($stateProvider, $urlRouterProvider, $locationProvider) {
  $stateProvider

.state('app', {
    name: 'app',
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: 'AppCtrl'
  })

.state('app.discover', {
    name: 'app.discover',
    url: "/discover",
    views: {
      'menuContent': {
        templateUrl: "templates/discover-tabs-controller.html"
      }
    }
  })

url: "/home",
views: {
   'home-tab': {
   templateUrl: "templates/discover-tabs/discover-home.html",
   controller:  'ActivityCntl'
       },
       'discover-home-listview': {
   templateUrl: "templates/discover-tabs/discover-home.html",

       }
}

    <ion-side-menus enable-menu-with-back-views="false">
      <ion-side-menu-content>

//IT GETS PUSHED UNDER THIS
        <ion-nav-bar class="bar-calm">
          <ion-nav-back-button>
          </ion-nav-back-button>

          <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
            </button>
          </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="menuContent"></ion-nav-view>
      </ion-side-menu-content>

      <ion-side-menu side="left">
        <ion-header-bar class="bar-stable">
          <h1 class="title">MYApps</h1>
        </ion-header-bar>
        <ion-content>
          <ion-list>
            <ion-item menu-close ng-click="login()">
            <i class="icon ion-person"></i>
              Login
            </ion-item>
            <ion-item menu-close href="#/app/discover">
             <i class="icon ion-location"></i>
              Discover
            </ion-item>
            <ion-item menu-close href="#/app/map">
            <i class="icon ion-map"></i>
              Map
            </ion-item>

          </ion-list>
        </ion-content>
      </ion-side-menu>
    </ion-side-menus>