ons-sliding-menu "preopen" 事件的监听器

Question

我正在尝试为 ons-sliding-menu "preopen" 事件定义事件侦听器。我希望在预打开时调用 UICtrl 控制器的 setTitle() 函数。这是我的代码

app.js

app.controller('UICtrl', function($scope, UIService){  

  $scope.setMainTitle = function(title) {
    UIService.setTitle(title);
  }  
 }

我尝试了以下 HTML。但是事件甚至没有被触发（我试图写到控制台，它根本没有被触发）

index.html

<div ng-controller="UICtrl" >
    <ons-sliding-menu  var="app.slidingMenu"  ng-preopen="setMainTitle('test')"
   menu-page="menu.html" main-page="main.html"  swipable 
    side="left" type="reveal" max-slide-distance="250px">
</ons-sliding-menu>    
 </div>

我尝试的另一件事是： index.html

 ons.ready(function() {
    app.slidingMenu.on('preopen', function() {
        console.log('preopen');
        setMainTitle('Test');
    } )
 });

在这种情况下，事件被触发，但 setMainTitle 函数在此范围内自然是未定义的。

有人可以建议如何实现这一目标吗？

Answer 1

我猜标题在你的 main.html 上？？

我尝试了同样的事情，但没有使用 angularJS

看看这个样本： codepen example

JS：

ons.bootstrap();

ons.ready(function() {
  menu.on("preopen", function() {
    document.getElementById("title").innerHTML = "my title";
  });
});

HTML：

<ons-sliding-menu
                  above-page="page1.html"
                  behind-page="menu.html"       
                  side="left"
                  max-slide-distance="250px"
                  var="menu">
</ons-sliding-menu>

<ons-template id="page1.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
      </div>
      <div class="center" id="title">Page 1</div>
    </ons-toolbar>

    <p style="text-align: center; color: #999; padding-top: 100px;">Page1 Contents</p>
  </ons-page>
</ons-template>


<ons-template id="page2.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
      </div>
      <div class="center">Page 2</div>
    </ons-toolbar>

    <p style="text-align: center; color: #999; padding-top: 100px;">Page2 Contents</p>
  </ons-page>
</ons-template>

<ons-template id="menu.html">
  <ons-list>
    <ons-list-item modifier="chevron" onclick="menu.setAbovePage('page1.html', {closeMenu: true})">
      page1.html
    </ons-list-item>
    <ons-list-item modifier="chevron" onclick="menu.setAbovePage('page2.html', {closeMenu: true})">
      page2.html
    </ons-list-item>
  </ons-list>
</ons-template>