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

add controller to a template menu in ionic1

我有一个用 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 ("it loads") 的测试,这条消息出现了两次。我需要菜单的 $scope 根据当前控制器。

这是我的代码:

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'
  }
}
})

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

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