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

Question

我的代码如下，当我点击标签按钮"Ratios"时，它不起作用，但是当我点击"Notes"时，它works.Actually，当我改变ons的顺序时-template，比如ons-template序列是"price.html","notes.html","ratios.html"，结果是当我点击tab按钮"notes"时，它不起作用，但是当我点击"Ratios"，有效。有人知道原因吗？

 <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> 之后立即添加它，您将拥有如下主页：

<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>

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

there is a bug that is ons-tab not work in my program

onsen-ui