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

Question

我在两个页面上有两个 ons-carousel (v1.3.13)，我尝试附加到事件但是在 angular.

中无法访问第二页上的轮播

这是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。

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

Answer 1

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

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

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

Var attribute is not working on second page on OnsenUI

onsen-ui