使用角度js [Onsen UI]将值从一个ons模板传递到另一个模板

时间:2016-02-24 08:55:56

标签: angularjs onsen-ui

我想要从一个ons-template到另一个模板的一些值,我尝试将值从ons-template发送到控制器并从控制器返回到另一个ons-template,但有没有办法可以直接从中获取值一个ons-template到另一个没有调用控制器?以下是我的代码。

sendmoney.html

<ons-template id="sendmoney.html">
        <ons-page modifier="shop-details"  class='page_bg'>
            <ons-toolbar style="background-color: #16A500;">
                <div class="left">
                    <ons-toolbar-button ng-click="menu.openMenu();">
                        <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
                    </ons-toolbar-button>
                </div>
                <div class="center">Send Money</div>
                <div class="right">
                    <ons-toolbar-button onclick="doContactPicker()">
                        <ons-icon icon="ion-plus" size="28px" fixed-width="false"></ons-icon>
                    </ons-toolbar-button>
                </div>
            </ons-toolbar>                                          
            <div ng-controller="getUserContacts">
            <ons-list-header>Select Contact</ons-list-header>
            <ons-list style="margin: -1px 0">   
                <div ng-show="loading" class="loading"><img src="img/loading.gif" height="50px" width="50px"></div>
                <ons-list-item modifier="chevron" class="list-item" ng-repeat="x in contacts track by $index" style="margin-left: 10px;" ng-click="page.pushPage('sendmoney2.html', {animation: 'slide'});">                    
                    <ons-row>                           
                        <ons-col width="52px" style="padding: 10px 0 0 0;">
                            <img src="img/red.png" height="42px" width="42px"/>
                        </ons-col>
                        <ons-col>
                            <header>
                                <span class="item-title">{{x.name}}</span>                                    
                            </header>
                            <p class="swipe-item-desc">{{x.phone}}</p>
                        </ons-col>                              
                    </ons-row>                      
                </ons-list-item>
            </ons-list>
            </div>
        </ons-page>
    </ons-template>

我想在sendmoney2.html模板中使用{{x.name}}{{x.phone}}

sendmoney2.html

<ons-template id="sendmoney2.html">
    <ons-page modifier="shop-details"  class='page_bg'>
        <ons-toolbar style="background-color: #16A500;">
            <div class="left">
                <ons-toolbar-button ng-click="menu.openMenu();">
                    <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
                </ons-toolbar-button>
            </div>
            <div class="center">Send Money</div>                
        </ons-toolbar>
    </ons-page>
</ons-template

1 个答案:

答案 0 :(得分:0)

我不太了解Angular,但在简单的JS中,你只需设置一个全局变量就可以解决这个问题。我认为应用程序设计只是一个大型网页。这经常帮助我解决我的问题。所以基本上只需在脚本的顶部定义它们:

var vName = '';
var vPhone = '';

然后在事件中设置它们,这应该有用。