0

我最近一直在处理 onsen-ui,当我尝试var="carousel"在 Tabbar 和 Navigator 组件中引用 Carrousel var () 时遇到了问题。

在我尝试使用 Tabs 之前,该代码一直有效。我收到以下错误:

未捕获(承诺中)类型错误:无法读取未定义的属性

我已经厌倦了“pageinit”解决方案,但它似乎不起作用。

这里在 HTML 下。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <link rel="stylesheet" href="lib/onsen/css/onsenui.css">
    <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="lib/onsen/js/angular/angular.min.js"></script>
    <script src="lib/onsen/js/onsenui.min.js"></script>
    <script src="lib/onsen/js/angular-onsenui.min.js"></script>
    <script src="js/app.js"></script>
</head>
<body ng-controller="AppCtrl">
    <ons-tabbar>
      <ons-tab page="home.html" active="true">
        <ons-icon icon="ion-home"></ons-icon>
        <span style="font-size: 14px">Home</span>
      </ons-tab>
    </ons-tabbar>
    <ons-template id="home.html">
        <ons-navigator title="Navigator" var="myNavigator">
            <ons-page>
              <ons-toolbar>
                <div class="center">Carousel</div>
              </ons-toolbar>
              <ons-carousel ng-controller="carouselCtrl" swipeable overscrollable auto-scroll fullscreen var="carousel">
                <ons-carousel-item style="background-color: gray;" id="carouselWho">
                  <div class="item-label">1</div>
                </ons-carousel-item>
                <ons-carousel-item style="background-color: #D38312;" id="carouselWhere">
                  <div class="item-label">2</div>
                </ons-carousel-item>
                <ons-carousel-cover>
                  <div class="cover-label">
                    <ons-icon icon="ion-ios-home" size="20px" fixed-width="true" ng-class="{'custom-icon': iconIndex == 'carouselWho'}"></ons-icon>
                    <ons-icon icon="ion-ios-location" size="20px" fixed-width="true" ng-class="{'custom-icon': iconIndex == 'carouselWhere'}"></ons-icon>
                </div>
                </ons-carousel-cover>
              </ons-carousel>
            </ons-page>
        </ons-navigator>
    </ons-template>
</body>
</html>

和 app.js

var module = ons.bootstrap('my-app', ['onsen']);

module.controller('AppCtrl',['$scope', function($scope) {

}]);

module.controller('carouselCtrl',['$scope', function($scope) {

    ons.ready(function() {

        $scope.iconIndex = $scope.carousel._attrs.$$element[0].children[$scope.carousel.getActiveIndex()].id;
        $scope.$apply();

        $scope.carousel.on('postchange', function (event) {
            $scope.iconIndex = $scope.carousel._attrs.$$element[0].children[$scope.carousel.getActiveIndex()].id;
            $scope.$apply()
        });

   });

}]);

你知道问题出在哪里吗?

非常感谢您的时间。

4

1 回答 1

0

我在您的 HTML 中添加了一个选项卡并将其放在 codepen 上。它似乎工作?你能指定当你得到错误时会发生什么吗?

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
</head>
<body ng-controller="AppCtrl">
    <ons-tabbar>
      <ons-tab page="home.html" active="true">
        <ons-icon icon="ion-home"></ons-icon>
        <span style="font-size: 14px">Home</span>
      </ons-tab>
      <ons-tab page="home2.html" active="true">
        <ons-icon icon="ion-home"></ons-icon>
        <span style="font-size: 14px">Home</span>
      </ons-tab>
    </ons-tabbar>
    <ons-template id="home.html">
        <ons-navigator title="Navigator" var="myNavigator">
            <ons-page>
              <ons-toolbar>
                <div class="center">Carousel</div>
              </ons-toolbar>
              <ons-carousel ng-controller="carouselCtrl" swipeable overscrollable auto-scroll fullscreen var="carousel">
                <ons-carousel-item style="background-color: gray;" id="carouselWho">
                  <div class="item-label">1</div>
                </ons-carousel-item>
                <ons-carousel-item style="background-color: #D38312;" id="carouselWhere">
                  <div class="item-label">2</div>
                </ons-carousel-item>
                <ons-carousel-cover>
                  <div class="cover-label">
                    <ons-icon icon="ion-ios-home" size="20px" fixed-width="true" ng-class="{'custom-icon': iconIndex == 'carouselWho'}"></ons-icon>
                    <ons-icon icon="ion-ios-location" size="20px" fixed-width="true" ng-class="{'custom-icon': iconIndex == 'carouselWhere'}"></ons-icon>
                  </div>
                </ons-carousel-cover>
              </ons-carousel>
            </ons-page>
        </ons-navigator>
    </ons-template>
    <ons-template id="home2.html">
        <ons-navigator title="Navigator" var="myNavigator">
            <ons-page>
              <ons-toolbar>
                <div class="center">Carousel</div>
              </ons-toolbar>
              <ons-carousel ng-controller="carouselCtrl" swipeable overscrollable auto-scroll fullscreen var="carousel">
                <ons-carousel-item style="background-color: gray;" id="carouselWho">
                  <div class="item-label">3</div>
                </ons-carousel-item>
                <ons-carousel-item style="background-color: #D38312;" id="carouselWhere">
                  <div class="item-label">4</div>
                </ons-carousel-item>
                <ons-carousel-cover>
                  <div class="cover-label">
                    <ons-icon icon="ion-ios-home" size="20px" fixed-width="true" ng-class="{'custom-icon': iconIndex == 'carouselWho'}"></ons-icon>
                    <ons-icon icon="ion-ios-location" size="20px" fixed-width="true" ng-class="{'custom-icon': iconIndex == 'carouselWhere'}"></ons-icon>
                  </div>
                </ons-carousel-cover>
              </ons-carousel>
            </ons-page>
        </ons-navigator>
    </ons-template>
</body>
</html>

https://codepen.io/grailly/pen/wWLavb?&editors=101

于 2016-08-24T11:52:35.503 回答