Question

我正在尝试为ons-sliding-menu定义事件监听器＆＃34; preopen＆＃34;事件。我希望在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>

监听ons-sliding-menu“preopen”事件

1 个答案: