Question

我在两个页面上有两个ons-carousel（v1.3.13），我尝试附加到事件但是第二页上的轮播无法以角度访问。

这是js代码

var app = ons.bootstrap();

app.controller('DemoController', function($scope) {
  ons.ready(function() {
    console.log('ready 1');
    $scope.car1.on('overscroll', function(event) {

    });
  });
  $scope.foo = function() {
    navi.pushPage('page2.html');
  }
});

app.controller('DemoController2', function($scope) {
  ons.ready(function() {
    console.log('ready 2');
    $scope.car2.on('overscroll', function(event) {

    });
  });
});

和Html代码

<ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="page1" side="left" type="overlay" max-slide-distance="200px">
    </ons-sliding-menu>

<ons-template id="page1">
  <ons-navigator var="navi">
    <ons-page ng-controller="DemoController">
      <ons-toolbar>
        <div class="center">Page 1</div>
      </ons-toolbar>
     <ons-button ng-click="foo()">Go To Page2</ons-button>
      <ons-carousel var="car1" style="width:100%;height:250px;" swipeable overscrollable auto-scroll auto-refresh>
        <ons-carousel-item>
        </ons-carousel-item>
        <ons-carousel-cover>
          <div class="cover-label">Car1</div>
        </ons-carousel-cover>
      </ons-carousel>

    </ons-page>
  </ons-navigator>
</ons-template>

<ons-template id="page2.html">

  <ons-page ng-controller="DemoController2">
    <ons-toolbar>
      <div class="center">Page 2</div>
    </ons-toolbar>
    <ons-carousel var="car2" style="width:100%;height:250px;" swipeable overscrollable auto-scroll auto-refresh>
      <ons-carousel-item>
      </ons-carousel-item>
      <ons-carousel-cover>
        <div class="cover-label">Car2</div>
      </ons-carousel-cover>
    </ons-carousel>
  </ons-page>
</ons-template>

<ons-template id="menu.html">
  <ons-page>
  </ons-page>
</ons-template>

以下是我的问题的CodePen。

当尝试推送page2时，它在控制台上显示错误，而相同的代码在第1页中没有问题

Answer 1

ons.ready仅在库准备就绪时在应用程序的开头触发，而不是在之后运行新控制器时触发。所以它实际上并没有等待DemoController2中的任何事情。您可以改为使用pageinit事件：document.addEventListener('pageinit', function($scope) { $scope.car2.on('overscroll', ... });。

您还可以使用属性ons-overscroll="expression"，通常更容易。

Var属性在OnsenUI上的第二页上不起作用

1 个答案: