AngularJS 下实现 SPA 弹窗框架解决方案-JavaScript中文网-JavaScript教程资源分享门户

单页应用（Single Page Application）的兴起，使得前端工程师需要考虑在页面中嵌入弹窗框架。而当下在前端框架的竞争中，AngularJS已经成为众多开发者的首选框架。此篇文章介绍一种基于AngularJS的SPA弹窗框架解决方案，并提供示例代码供读者参考、学习和实践。

弹窗框架解决方案

推荐一种基于AngularJS的ngDialog弹窗框架。ngDialog是一种适用于AngularJS的模态框（基于Angular-UI modal directive）和警告框框架，它用于替代Bootstrap的模态框组件、Angular-UI modal directive，以及Angular-UI bootstrap modal。总体来说，ngDialog有着良好的性能，同时较为简单易用、灵活定制。

ngDialog基础用法

ngDialog能够帮助我们定制一个基础的弹窗框架，根据开发的需求，提供相对应的一些方法来调用。具体用法如下：

引入ngDialog库和样式：

最简单的方法是将ngDialog下载到本地，并通过script和link标签进行引入。

  <script src="js/ngDialog.min.js"></script>
  <link rel="stylesheet" href="css/ngDialog.min.css">

声明一个基础的弹出框：

通过ngDialog的service打开一个dialog，并进行基础设置。

var dialog = ngDialog.open({
  template: 'custom_dialog',
  controller: 'CustomDialogCtrl',
  className: 'ngdialog-theme-default'
});

关闭弹窗

dialog.close();

当然，以上只是一个基本的使用，我们可以进行更加自定义的设置。

ngDialog高级使用方法

配置

通过自定义provider来全局配置：

// javascriptcn.com 代码示例
angular.module('myApp', ['ngDialog'])
.config(['ngDialogProvider', function(ngDialogProvider) {
    ngDialogProvider.setDefaults({
        className: 'ngdialog-theme-default',
        plain: false,
        showClose: true,
        closeByDocument: true,
        closeByEscape: true,
        appendTo: false,
        preCloseCallback: function() {
            console.log('default pre-close callback');
        }
    });
}]);

当然上述配置都有对应的方法进行复写。

多个弹窗同时显示

通过多次调用实现显示多个弹窗：

ngDialog.open({ template: 'popupTmpl.html' });
ngDialog.open({ template: 'popupTmpl2.html' });

手动声明弹窗框

为了方便多处使用，我们可以在html文件中声明弹窗模板:

<script type="text/ng-template" id="templateId">
    声明一个新的模板
</script>

而在控制器中通过调用"$uibModal"打开模板：

app.controller('MainCtrl', function ($scope, ngDialog) { 
    ngDialog.open({ 
        template: 'template.html', 
        controller: 'ModalCtrl', 
        className: 'ngdialog-theme-default', 
        closeByEscape:false 
    }); 
});

带数据和自定义控制器

通过将数据传入控制器来更加自由地操作弹窗：

// javascriptcn.com 代码示例
app.controller('MainCtrl', ['$scope', 'ngDialog', function ($scope, ngDialog) {
    $scope.clickToOpen = function () {
        ngDialog.open({
            template: 'externalTemplate.html',
            className: 'ngdialog-theme-plain',
            scope: $scope
        });
    };
}]);

app.controller('ModalCtrl', ['$scope', function ($scope) {
    $scope.logVal = function () {
        console.log($scope.val);
    };
}]);

declare相似于在ng-dialog之外声明一个控制器，然后在弹出窗口中使用它。通过这种方式，我们可以将弹窗中使用的代码从外部环境中分离出来，这是一个非常好的技巧。

// javascriptcn.com 代码示例
app.controller('ExpDialogCtrl', function($scope){
    $scope.title = '控制器内容标题';
    $scope.description = '描述内容将仅用于弹出框中';
});

ngDialog.open({
    template: 'tmpl-explicit.html',
    controller: 'ExpDialogCtrl',
    data: {
        someData: '我需要传递给我的控制器!'
    }
});

示例代码

// javascriptcn.com 代码示例
<!doctype html>
<html ng-app="app">
<head>
    <meta charset="utf-8">
    <script src="//cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
    <script src="http://likeastore.github.io/ngDialog/js/ngDialog.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://likeastore.github.io/ngDialog/css/ngDialog.css">
    <link rel="stylesheet" type="text/css" href="http://likeastore.github.io/ngDialog/css/ngDialog-theme-default.css">
    <title>ngDialog test</title>
</head>
<body ng-controller="HomeCtrl">
<button ng-click="showLogin()">Show Login</button>
<button ng-click="showRegister()">Show Register</button>
<script type="text/ng-template" id="loginTemplate">
    <div class="choose-music-popup">
        <h2>Login Form</h2>
        <form>
            <input type="email" placeholder="Email" />
            <input type="password" placeholder="Password" />
            <button>Login</button>
        </form>
        <code>{{$parent.$index}}</code>
    </div>
</script>
<script type="text/ng-template" id="registerTemplate">
    <div class="choose-music-popup">
        <h2>Register Form</h2>
        <form>
            <input type="text" placeholder="name" />
            <input type="email" placeholder="Email" />
            <input type="password" placeholder="Password" />
            <button>Register</button>
        </form>
        <code>{{$parent.$index}}</code>
    </div>
</script>
<div ng-dialog="opened" template="template" ng-model="ngDialog">
    <div class="choose-music-popup">
        <h2>Geek-music Playlist</h2>
        <ul>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Quasi sequi laudantium nobis!</li>
            <li>Explicabo, facere quisquam similique!</li>
            <li>Distinctio ipsa vitae consectetur.</li>
            <li>Laborum, maiores, sequi? Quam.</li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    angular
    .module('app', ['ngDialog'])
    .controller('HomeCtrl', function($rootScope, $scope, ngDialog) {
        $scope.showLogin = function() {
            ngDialog.open({
                template: 'loginTemplate',
                controller: 'HomeCtrl'
            });
        };
        $scope.showRegister = function() {
            ngDialog.open({
                template: 'registerTemplate',
                controller: 'HomeCtrl'
            });
        };
    });
</script>
</body>
</html>

总结

以上便是基于AngularJS的SPA弹窗框架解决方案，通过ngDialog插件进行较为自由灵活地弹窗框架开发，同时也高度保证了性能。在之后的开发中可以充分利用这种框架提供的方法和模板进行更加个性化定制的开发。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6544ba647d4982a6ebe90727