温泉UI菜单没有响应

时间:2015-10-08 00:18:08

标签: onsen-ui

我使用Onsen UI作为Sensation App的一部分。我正在尝试复制页面,并使用适当的信息复制了html页面,data.js和app.js。每当我将应用程序启动到手机时,我都会尝试单击我的新页面。它没有加载。在我的感觉上,我也无法打开任何其他页面。请帮忙。谢谢!



//Data.JS
var sensationApp = angular.module('sensationApp');

// Home Data: Home page configuration
sensationApp.factory('Data', function(){
    var data = {};
    
    data.items = [
        { 
            title: 'ABOUT BN',
            icon: 'home',
            page: 'aboutbn-master.html'
        },
        { 
            title: 'ABOUT ALPHA',
            icon: 'university',
            page: 'posts.html'
        },
        { 
            title: 'LINEAGE',
            icon: 'sort-numeric-asc',
            page: 'categories.html'
        },
        { 
            title: 'BNSTYLE',
            icon: 'shopping-cart',
            page: 'products.html'
        },
        { 
            title: 'BNTUNE',
            icon: 'cloud-upload',
            page: 'news.html'
        },
        { 
            title: 'BNVOLVED',
            icon: 'users',
            page: 'contact.html'
        },
        { 
            title: 'GALLERY',
            icon: 'camera',
            page: 'gallery.html'
        },
        { 
            title: 'EVENTS',
            icon: 'calendar',
            page: 'serverposts.html'
        },
        { 
            title: 'THE TORCH',
            icon: 'fire',
            page: 'categories.html'
        }
    ]; 
    
    return data;
});



sensationApp.factory('AboutBNData', function(){

                     var data = { url: 'http://bnorbeout.com/?json=get_category_posts&slug=events&' };
                     
                     return data;
                     });

//home.html
<ons-navigator title="BNorBeOut" var="appNavigator">
    
    <ons-page ng-controller="HomeController">
        
        <ons-toolbar fixed-style>
            <div class="left">
            <ons-toolbar-button onclick="menu.toggleMenu()">
                <ons-icon icon="bars">
            </ons-toolbar-button>
            </div>
            
            <div class="center">BNorBeOut</div>
            
            <div class="right">
            <ons-toolbar-button onclick="appNavigator.pushPage('contact.html',{title: 'CONTACT US', animation: 'slide'})">
            <ons-icon icon="envelope">
            </ons-toolbar-button>
            </div>
        </ons-toolbar>
        
        <ons-scroller>
            
            <section style="padding: 0 10px 0 0;">
                <center><img ng-src="img/BNLogo.png" alt="The House that Chapman Built"/></center>
            </section>
            
            <section class="home-grid">
                <div class="grid-menu">
                    <div class="centering-and-alignment" ng-repeat="row in items | partition:3">
                      <div class="grid-menu-item list__item list__item--tappable" ng-repeat="item in row" ng-click="showDetail(($parent.$index*row.length)+$index);">
                        <ons-icon style="color: #BB8B09" icon="{{item.icon}}"></ons-icon>
                        <div class="grid-menu-item-label">{{item.title}}</div>
                      </div>
                    </div>
                </div>

                <ons-list class="list-top">
                    <ons-list-header>BUY TICKETS</ons-list-header>
                    <ons-list-item modifier="chevron" ng-click="loadURL(http://tallahassee.moonevents.com/events/chillmatic-0)">
                        <ons-row>
                                <center><img ng-src="img/Chillmatic2015.jpg" alt="Chillmatic 2015"/></center>
                            </ons-col>
                        </ons-row> 
                    </ons-list-item>
                </ons-list>
                
                <ons-list class="list-top">
                    <ons-list-header>CONTACT</ons-list-header>
                    <ons-list-item modifier="chevron" ng-click="appNavigator.pushPage('parameters-master.html')">
                        <ons-row>
                            <ons-col width="15%">
                                <ons-icon icon="level-up" fixed-width="true"></ons-icon>
                            </ons-col>
                            <ons-col class="left">
                                2115 S. Martin Luther King Jr. Blvd., Tallahassee, FL 32301
                            </ons-col>
                        </ons-row>
                        <ons-row>
                            <ons-col width="15%">
                                <ons-icon icon="level-up" fixed-width="true"></ons-icon>
                            </ons-col>
                            <ons-col class="left">
                                414-841-2407
                            </ons-col>
                        </ons-row>
                    </ons-list-item>
                </ons-list>
            </section>

        </ons-scroller>
        
    </ons-page>

</ons-navigator>
  
//AboutBN-Master.html


  <ons-page ng-controller="AboutBNController">
    
    <ons-toolbar>
        <div class="left"><ons-back-button>Back</ons-back-button></div>
        <div class="center">Events</div>
        </div>
    </ons-toolbar>
    
    <ons-pull-hook ng-action="load($done)" var="loader">
        <span ng-switch="loader.getCurrentState()">
            <span ng-switch-when="initial"><ons-icon size="35px" icon="ion-arrow-down-a"></ons-icon> Pull down to refresh</span>
            <span ng-switch-when="preaction"><ons-icon size="35px" icon="ion-arrow-up-a"></ons-icon> Release to refresh</span>
            <span ng-switch-when="action"><ons-icon size="35px" spin="true" icon="ion-load-d"></ons-icon> Loading data...</span>
        </span>
    </ons-pull-hook>
    
    <section style="padding: 10px;">
        
        <ons-list class="status-bar feeds">
            <ons-list-item>{{status_bar}}</ons-list-item>
        </ons-list>
        
        <ons-row style="padding: 10px 0 20px 0;">
            <input type="search" placeholder="Search" class="search-input" ng-model="search">
                </ons-row>
        
        <div ng-repeat="post in getAboutBN()">
            <ons-row style="padding: 0 0 20px 0;">
                <ons-col>
                    <h3 class="title" ng-bind-html="post.title" ng-click="showSearchDetail($index)"></h3>
                    
                    <a ng-click="showSearchDetail($index)">
                        <img class="post-teaser-image" ng-src="{{post.attachments[0].images.thumbnail.url}}" ng-show="{{post.attachments.length}}"/>
                    </a>
                    
                    <p class="post-excerpt" ng-bind-html="post.excerpt"></p>
                    <ons-button class="post-teaser" modifier="quiet" ng-click="showSearchDetail($index)">Read more</ons-button>
                    
                </ons-col>
            </ons-row>
        </div>
        
        <ons-list class="status-bar feeds">
            <ons-list-item>{{status_bar}}</ons-list-item>
        </ons-list>
        
        <ons-row align="center">
            <ons-col>
                <ons-button ng-show="hasMoreItems()" ng-click="showMoreItems()" class="load-show-more"><i class="fa fa-angle-double-down more-icon"></i>Load more</ons-button>
            </ons-col>
        </ons-row>
        
        <ons-row align="center" class="status-message">
            <ons-col>
                <span class="loading"><i class="fa fa-spin fa-circle-o-notch"></i> Loading</span>
                <span ng-bind="msg"></span>
            </ons-col>
        </ons-row>
        
    </section>
    
</ons-page>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

我发现了这个问题。我必须在app.js中以不同的方式命名控制器。主控制器应始终匹配数据,细节控制应仅引用一次。