我正在尝试为我的应用程序实现登录/登录对话框(类似于Medium),我在网上进行了很多搜索,我认为我将使用有角度的ui-bootstrap中的$ modal。我想知道是否有人可以指导我使用$ model制作类似的教程。任何帮助表示赞赏。
谢谢!
文档:https : //github.com/angular-ui/bootstrap/tree/master/src/modal <<包含代码示例。标记和Javascript。从这里开始。
http://www.nganimate.org/ <<这可以帮助创建类似于Medium的登录内容的介绍过渡效果。
这是一个开始(填补空白,编写模态html +控制器):
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>
main-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.
});
});
})();
login-template.html:
<div ng-view class="login-intro">
<!--login inputs, buttons etc here-->
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句