1

我的应用程序具有带有一些输入和按钮的 ui-bootstrap 模式。它在桌面上完美运行,但在较窄的屏幕上,模式在释放鼠标按钮后失去焦点(光标从输入框中消失),因此很难在那里输入任何内容。

提示:当我按下鼠标按钮时它可以工作。我可以进入测试:)。

模态代码:

<div ng-controller="LoginModalCtrl as $ctrl" class="modal-login">

    <script type="text/ng-template" id="loginModalContent.html">
        <div id="ModalLog" tabindex="-1" role="dialog" aria-labelledby="Zaloguj się">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" aria-label="Close" ng-click="$ctrl.cancel();"><span aria-hidden="true">&times;</span></button>
                    <h2 class="modal-title" id="myModalLabel">Zaloguj się do accTrader.com</h2>
                </div>
                <div class="modal-body">
                    <form method="post" name="submit_reg">
                        <label for="login">Login:</label>
                        <input type="text" placeholder="login" ng-model="$ctrl.loginData.login" name="login" title="Wpisz swój login, użyj 6 do 20 znaków!" required />

                        <label for="password">Hasło:</label>
                        <input type="password" placeholder="hasło" ng-model="$ctrl.loginData.password" name="password" title="Wpisz swój login, użyj 8 do 20 znaków!" required />

                        <a href="forget.php" title="zapomniałem hasła"> Zapomniałem hasła :( </a>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" ng-click="$ctrl.cancel()">Zamknij</button>
                    <button type="button" class="btn btn-primary btn-md" ng-click="$ctrl.login()">Zaloguj się</button>
                </div>
            </div>
        </div>
    </script>

    <A ng-click="$ctrl.open()">Zaloguj</A>
</div>

索引.html:

<!-- angular modules -->
<script src="scripts/angular/angular.min.js"></script>
<script src="scripts/angular/angular-route.min.js"></script>
<script src="scripts/angular/ui-bootstrap.min.js"></script>
<script src="scripts/angular/angular-animate.min.js"></script>
<script src="scripts/angular/angular-touch.min.js"></script>
<script src="scripts/angular/angular-local-storage.min.js"></script>

更新 1:我将 ngTouch 添加到应用程序模块,但仍然是同样的问题:

var app = angular.module('XXXX', [
    'ngRoute', 'ui.bootstrap', 'LocalStorageModule', 'duScroll', 'ngTouch'
]).

更新 2:在实施 UPDATE1 后,它工作得更好一些:它在 FF & IE11 中工作稳定,但有时在 Chrome 中会失败。

4

0 回答 0