我正在尝试为我的应用程序实现一个登录/登录对话框(类似于 Medium )我在网上搜索了很多相关内容,我想我会使用 Angular ui-bootstrap 中的 $modal 。我想知道是否有人可以指导我使用 $model 制作类似的东西的教程。如有任何帮助,我们将不胜感激。
谢谢!
最佳答案
文档:https://github.com/angular-ui/bootstrap/tree/master/src/modal << 包含代码示例。标记和 JavaScript。从这里开始。
http://www.nganimate.org/ << 这可以帮助创建类似于 Medium 的登录效果的介绍过渡效果。
这是一个开始(填空,编写你的模态 html + Controller ):
index.html:
<style type="text/css">
.login-intro.ng-enter { /*starting css properties. Transparency, position etc*/ }
.login-intro.ng-enter.ng-enter-active { /*final css properties. The ngAnimate will transition these for you*/ }
</style>
<div ng-controller="MainCtrl as main">
<a href="#" ng-click="main.openLoginModal()">Log in / Sign up</a>
</div>
主 Controller .js:
(
var myModule = angular.module('myModule', ['ui.bootstrap']);
myModule.controller('MainCtrl as main', function($modal){
var controller = this;
controller.openLoginModal = function(){
var modalInstance = $modal.open({
templateUrl: 'login-template.html',
controller: 'LoginController as login'
};
modalInstance.result.then(function () {
// Redirect to the logged-in area of your site
}, function () {
// optional function. Do something if the user cancels.
});
});
})();
登录模板.html:
<div ng-view class="login-intro">
<!--login inputs, buttons etc here-->
</div>
关于javascript - 用于 Angular 应用程序登录/注册的模式/对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28733762/