在我的Onsenui应用程序中添加登录页面

时间:2014-03-03 10:46:48

标签: javascript mobile onsen-ui monaca

我想在进入主页面之前设置登录页面。 我怎么能在这条指令之前做到这一点:

<ons-screen page="sliding_menu.html"></ons-screen>

我使用Monaca IDE

感谢您的帮助

查尔斯

1 个答案:

答案 0 :(得分:10)

您可以尝试这种方式:

<强>的index.html

<ons-screen page="login.html"

<强> login.js

function LoginController($scope){
    $scope.login = function(id, password){
        $scope.ons.screen.presentPage('sliding_menu.html');
    }
}

<强>的login.html

    <div class="page center" ng-controller="LoginController">
    <div class="row">
        <div class="col">
            <ons-text-input placeholder="id" ng-model="id">             
            </ons-text-input>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <input type="password" placeholder="password" ng-model="password" class="topcoat-text-input">
        </div>
    </div>

    <div class="row">
        <div class="col">
            <ons-button ng-click="login(id, password)">
                Login
            </ons-button>
        </div>
    </div>
</div>

演示: http://onsenui.github.io/stackoverflow/sliding_menu_login/app/

下载src: http://onsenui.github.io/stackoverflow/sliding_menu_login.zip