将控制器添加到ionic1中的模板菜单中

时间:2018-05-17 14:26:36

标签: javascript angularjs ionic-v1

我有一个在ionic1中创建的应用程序,我的应用程序包含一个名为menu.html的模板,它包含一个<ion-side-menus>,它载有我的其他模板和视图。问题是我想在$ scope中的变量可以直接在我的模板menu.html中看到,具体取决于当前加载的驱动程序。

例如在我的控制器实际上我有:

$scope.title="hello";
menu.html中的

{{title}} (should be display "hello")

但我的$scope变量未显示在menu.html中 如果我添加ng-controller = "myControllerController"它可以工作,但我想避免这个解决方案,因为我的控制器的内容将被加载两次。我已完成测试放置console.log(“它加载”),此消息出现两次。我需要根据当前控制器的菜单范围。

这是我的代码:

menu.html:

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <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 id="sidemenu"  side="left"  >
    <ion-header-bar class="bar-stable">
      <h1 class="title">{{title}}</h1>  <!-- title -->
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close href="#/app/productos">
          Registro
        </ion-item>
        <ion-item menu-close href="#/app/buscar">
          Buscar
        </ion-item>
        <ion-item menu-close href="#/app/ubicaciones">
          Ubicación
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

控制器实际:myControllerController.js

tinApp.controller('myControllerController', function($scope) {
 $scope.title="hello";
});

App.js:

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

.state('app.view1', {
url: '/view1',
views: {
  'menuContent': {
    templateUrl: 'templates/view1.html',
    controller: 'myControllerController'
  }
}
})

1 个答案:

答案 0 :(得分:1)

为什么不向菜单控制器添加一个事件监听器,每次页面发生变化时都会触发该监听器。然后,您可以每次获取页面名称并使用它来设置标题。如果它是一个自定义名称,只需将其添加为路径中的一个页面自定义参数。

$rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams){
        ...
    });