angularjs+bootstrap+ngDialog实现模式对话框

效果如下图：

通过查阅资料，选择使用ngDialog来实现，ngDialog是一个用于Angular.js应用的模式对话框和弹出窗口。ngDialog非常小（?2K），拥有简约的API，通过主题高度可定制的，具有唯一的依赖Angular.js。

ngDialog github地址:   https://github.com/likeastore/ngDialog

ngDialog Demo : http://likeastore.github.io/ngDialog/

首先引入需要的ngdialog的js和css文件。

可通过CDN引入

//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.3.7/css/ngDialog.min.css
//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.3.7/css/ngDialog-theme-default.min.css
//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.3.7/css/ngDialog-theme-plain.min.css
//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.3.7/js/ngDialog.min.js

var userControllers = angular.module('userControllers',['ngDialog']);

userControllers.controller('userController',['$scope','$http','ngDialog',function($scope,$http, ngDialog){
    $scope.name = 'user';
    $scope.user = "";
    $scope.address = "";
    //获取用户信息
    $http.get('http://localhost:3000/users').success(function(data) {
        $scope.user = data;
        console.log($scope.user);
    });
    //点击详细地址按钮时，跳出模式对话框
    $scope.clickToAddress = function (address) {
        $scope.address = address;
        ngDialog.open({ template: 'views/test.html',//模式对话框内容为test.html
            className: 'ngdialog-theme-plain',
            scope:$scope //将scope传给test.html,以便显示地址详细信息
        });
    };
}])

    

    

        

            收件人姓名
        
        

            {{address.name}}
        
    
    

        

            收件地址
        
        

            {{address.content}}
        
        
    

        

            手机号
        
        

            {{address.phone}}
        
    
    

    

        

            用户管理
        
    

        

        

            

                
      
        Go!
      
            
        
    
    

        

        
姓名
        
余额  
        
头像
        
默认地址
        
操作
        
        

        

            
{{user.userName}}
            
{{user.residualPayment}}
            
{{user.url}}
            
系统默认头像
            
暂无默认地址
            

                详细地址
            
            

                删除