我的应用程序具有带有一些输入和按钮的 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">×</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 中会失败。