Question

我的代码如下，当我点击标签按钮“比率”时，它不起作用，但是当我点击“注释”时，它可以工作。实际上，当我更改ons-template的序列时，例如ons-template顺序是“price.html”，“notes.html”，“ratios.html”，结果是当我点击标签按钮“注释”时，它不起作用，但是当我点击“比率”时，它的工作原理。谁知道原因？

 <ons-page ng-controller="myPortfoliosController">
    <ons-toolbar class="DCF">
        <div class="left">
            <ons-back-button style="color:white;"></ons-back-button>
        </div> 
        <div class="center" style="font-size:22px;" >My Portfolios</div>
    </ons-toolbar>        
    <ons-tabbar  position="top">
        <ons-tab page="price.html"  active="true">Price</ons-tab>
        <ons-tab page="ratios.html">Ratios</ons-tab>
        <ons-tab page="notes.html" >Notes</ons-tab>
    </ons-tabbar>

    <ons-template id="price.html">
        <ons-page ng-controller="portPrice">
            <div class="row" style="height:20px;background-color: #144A88;color:white;font-size: 14px;width: 100%;padding-left: 10px;">            
                    <div class="col-xs-6 col-sm-3" style="width:35%;">Stock Symbol</div>
                    <div class="col-xs-6 col-sm-3" style="width:20%;">Current</div>
                    <div class="col-xs-6 col-sm-3" style="width:25%;">Purchased</div>
                    <div class="col-xs-6 col-sm-3" style="width:20%;">Change</div>
            </div>
            <div ng-repeat="portfolio in portfoliosList">
                <div class="portname_{{portfolio.backgroundColor}}">{{portfolio.portname}}</div>
                <div ng-repeat="portfolioStock in portfolio['detail']">
                    <div class="row">
                        <div class="col-xs-6 col-sm-3" style="width:40%;border-bottom:1px dashed #c0c0c0;">{{portfolioStock.symbol}}</div>
                        <div class="col-xs-6 col-sm-3" style="width:20%;border-bottom:1px dashed #c0c0c0;">{{portfolioStock.price}}</div>
                        <div class="col-xs-6 col-sm-3" style="width:20%;border-bottom:1px dashed #c0c0c0;">{{portfolioStock.in_price}}</div>
                        <div class="col-xs-6 col-sm-3" style="width:20%;border-bottom:1px dashed #c0c0c0;color:{{portfolioStock.font_color}}">{{portfolioStock.gain_p}}</div>
                    </div>
                </div>
            </div>
        </ons-page>
    </ons-template>

    <ons-template id="ratios.html">
        <ons-page  ng-controller="portRatios">
            <div class="row" style="height:20px;background-color: #144A88;color:white;font-size: 14px;width: 100%;padding-left: 10px;">            
                    <div class="col-xs-6 col-sm-3" style="width:35%;">Stock Symbol</div>
                    <div class="col-xs-6 col-sm-3" style="width:25%;">P/E(ttm)</div>
                    <div class="col-xs-6 col-sm-3" style="width:20%;">P/S</div>
                    <div class="col-xs-6 col-sm-3" style="width:20%;">P/B</div>
            </div>  
        </ons-page>
    </ons-template>

    <ons-template id="notes.html">
        <ons-page  ng-controller="portNotes">
            <div class="row" style="height:20px;background-color: #144A88;color:white;font-size: 14px;width: 100%;padding-left: 20%;">            
                <div class="col-xs-6 col-sm-2" style="width:45%;">Stock Symbol</div>
                <div class="col-xs-6 col-sm-2" style="width:55%;">User Notes</div>
            </div>
        </ons-page>
    </ons-template>
</ons-page>

Answer 1

问题是你试图将所有内容都包含在ons-page元素中并且那是错误的。你永远不能把ons-template包裹在ons-page里面，反之亦然。

要修复您的应用，只需删除最后一个</ons-page>代码并在</ons-tabbar>后立即添加，您将拥有如下主页：

＆＃13;

<ons-page ng-controller="myPortfoliosController">
    <ons-toolbar class="DCF">
        <div class="left">
            <ons-back-button style="color:white;"></ons-back-button>
        </div> 
        <div class="center" style="font-size:22px;" >My Portfolios</div>
    </ons-toolbar>        
    <ons-tabbar  position="top">
        <ons-tab page="price.html"  active="true">Price</ons-tab>
        <ons-tab page="ratios.html">Ratios</ons-tab>
        <ons-tab page="notes.html" >Notes</ons-tab>
    </ons-tabbar>
</ons-page>

＆＃13;

有一个错误，ons-tab在我的程序中不起作用

1 个答案: