Modal/dialog 对于 login/signup 对于 Angular 应用

Question

我正在尝试为我的应用程序实现一个 login/signin 对话框（类似于 Medium 的对话框）我在网上搜索了很多，我想我会选择 $modal来自 angular ui-bootstrap。我想知道是否有人可以指导我使用 $model 制作类似的东西的教程。感谢任何帮助。

谢谢！

Answer 1

这可能无法直接回答您的问题，但我已经使用 ngDialog (https://github.com/likeastore/ngDialog) 完成了登录模式对话框，其功能与 Medium 站点相似。您可能想查看 ngDialog。

Answer 2

文档：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>

主要-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.
        });
});



})();

登录-template.html:

<div ng-view class="login-intro">
    <!--login inputs, buttons etc here-->
</div>

Modal/dialog 对于 login/signup 对于 Angular 应用

Modal/dialog for login/signup for an Angular app

javascript

angularjs

twitter-bootstrap

web

frontend