在Angular中打开模态对话框 [英] Opening Modal Dialog in Angular
本文介绍了在Angular中打开模态对话框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我仍然是新手，但是我正在跟踪一个JSBIN，它显示了它是如何完成的.问题是我有相同的代码，但是当我单击按钮打开对话框时，得到的是您在以下屏幕截图中看到的内容.谁能指出我做错了什么地方?
JSBIN我正在尝试学习:
html
<！DOCTYPE html>< html ng-app ="RecipeSite">< head>< title>指令惯例</title>< script src ="bower_components/angular/angular.js"></script>< script src ="bower_components/angular-route/angular-route.js"></script>< script src ="bower_components/angular-material/angular-material.js"></script>< script src ="bower_components/angular-animate/angular-animate.js"></script>< script src ="bower_components/angular-aria/angular-aria.js"></script>< script src ="bower_components/angular-messages/angular-messages.js"></script>< script src ="bower_components/jquery/dist/jquery.js"></script>< script src ="http://ngmaterial.assets.s3.amazonaws.com/svg-assets-cache.js"</script>< script src ="bower_components/bootstrap/dist/js/bootstrap.js"></script>< link rel ="stylesheet" href ="bower_components/bootstrap/dist/css/bootstrap.min.css">< link rel ="stylesheet" type ="text/css" href ="app.css">< script src ="app.js"></script></head><身体>< div class ="container">< div id ="header">< div class ="row">< div class ="col-md-offset-3 col-md-6">{{食谱"}}</div></div><！-结束行->< hr class ="hrstyle"></div><！-结束标头->< div class ="links">< div class ="row">< div class ="col-md-offset-3 col-md-2">< a ng-href ="chicken-recipes.html"> {{"Chicken"}}}</a></div>< div class ="col-md-2">< a ng-href ="beef-recipes.html"> {{"Beef"}}}</a></div>< div class ="col-md-2">< a ng-href ="fish-recipes.html"> {{"Fish"}}}</a></div></div><！-结束行-></div><！-结束链接-></div><！-结束容器->< div class ="container">< div class ="row">< div class ="recipeLoader">< div class ="col-md-3">< div ng-view></div>< div ng-controller ='MyCtrl'>< button ng-click ='toggleModal()'>打开模态对话框</button>< modal-dialog show ='modalShown'width ='400px'height = '60％'>< p>模态内容转到此处< p></modal-dialog></div></div></div></div></div></body></html> app.js
var app = angular.module('RecipeSite'，['ngRoute']);app.config(['$ routeProvider'，'$ locationProvider'，function($ routeProvider，$ locationProvider){$ routeProvider.when('/chicken-recipes.html'，{templateUrl:"chicken-recipes.html"}).when('/beef-recipes.html'，{templateUrl:'beef-recipes.html'}).when('/fish-recipes.html'，{templateUrl:"fish-recipes.html"})$ locationProvider.html5Mode({已启用:true，requireBase:false});}]);<！-结束配置->app.directive('modalDialog'，function(){返回 {限制:"E"，范围: {显示:"="}，replace:true，//用下面的模板替换transclude:true，//我们想在指令中插入自定义内容链接:function(scope，element，attrs){scope.dialogStyle = {};如果(attrs.width)scope.dialogStyle.width = attrs.width;如果(attrs.height)scope.dialogStyle.height = attrs.height;scope.hideModal = function(){scope.show = false;};}，模板:< div class ='ng-modal'ng-show ='show'>< div class ='ng-modal-overlay'ng-click ='hideModal()'></div>< div class ='ng-modal-dialog'ng-style ='dialogStyle'>< div class ='ng-modal-close'ng-click ='hideModal()'> X</div><; div class ='ng-modal-dialog-content'ng-transclude</div></div></div"};});app.controller('MyCtrl'，['$ scope'，function($ scope){$ scope.modalShown = false;$ scope.toggleModal = function(){$ scope.modalShown =！$ scope.modalShown;};}]); css
/*对话框CSS */.ng-modal-overlay {/*覆盖整个屏幕的深色半透明div */位置:绝对；z-index:9999;顶:0;左:0;宽度:100％;高度:100％;背景颜色:#000000;不透明度:0.8;}.ng-modal-dialog {/*叠加层上方的居中div(带有框阴影).*/z-index:10000；位置:绝对；宽度:50％;/* 默认 *//*将对话框居中*/最高:50％；左:50％；转换:translate(-50％，-50％);-webkit-transform:翻译(-50％，-50％);-moz转换:translate(-50％，-50％);背景颜色:#fff;框阴影:4px 4px 80px#000;}.ng-modal-dialog-content {内边距:10px;文字对齐:左；}.ng-modal-close {位置:绝对；顶部:3px；右:5px；内边距:5px；光标:指针；字体大小:120％；显示:inline-block;font-weight:粗体;字体家族:"arial"，"sans-serif"；} 解决方案
使用 $ mdDialog 在AngularJS中打开对话框.
请参考以下示例:
//------------------------------------------------------------------------------------#users-list.tmpl.html#引用点击事件... ng-click ="vm.openContact(contact，$ event)"< table md-data-table class ="md-data-table" md-progress ="vm.deferred">< thead md-order ="vm.query.contact" md-trigger ="vm.getUsers">< tr>< th name ="Email" order-by ="email" decend-first></th></tr></thead>< tbody>< tr ng-repeat =在vm.users中的联系人>< td width ="20％">< a style ="cursor:pointer" ng-click ="vm.openContact(contact，$ event)">{{联系电子邮件}}</a></td></tr></tbody></table>//------------------------------------------------------------------------------------#users-list.controller.js#这是您打开对话框的单击事件的位置#即函数openContact(contact，$ event){...}#templateUrl:下面的"app/foo/admin/users/users-dialog.tmpl.html"显示了#链接到您要打开的对话框(功能() {使用严格"；角度的.module('app.foo.admin').controller('UsersListController'，UsersListController);/* @ngInject */函数UsersListController($ scope，$ state，$ mdDialog){var vm = this;vm.loading =假;vm.userSvc = userSvc;vm.openContact = openContact;启用();函数activate(){//初始化用户vm.userSvc.get().then(功能(用户){initSearchString(users);vm.users =用户；}，函数(错误){$ log.error(错误);});}函数openContact(contact，$ event){$ mdDialog.show({控制器:"UserManagementDialogController"，controllerAs:'vm'，templateUrl:"app/foo/admin/users/users-dialog.tmpl.html"，当地人:{联系人:联系人}，targetEvent:$ event，clickOutsideToClose:true});}}})();//----------------------------------------------------------------------------------#users-dialog.tmpl.html#使用< md-dialog></md-dialog>打开和关闭对话框#当您点击上方表格中的链接即会打开的对话框#< a style ="cursor:pointer" ng-click ="vm.openContact(contact，$ event)"> {{contact.email}}</a>< md-dialog class ="contact-dialog mobile-fullwidth-dialog" flex ="60" flex-xs ="100">< md-toolbar>< div class ="md-toolbar-tools">< h2 flex>< span translation> USER_MANAGEMENT.USER_INFORMATION</span></h2>< md-button class ="md-icon-button" ng-click ="vm.cancelClick()" aria-label ="cancel">< md-icon md-font-icon ="zmdi zmdi-close"</md-icon></md-button></div></md-toolbar>< md-dialog-content class ="md-dialog-content">< div layout ="row" layout-xs ="column">< div flex ="50" flex-xs ="100" layout ="row" class ="margin-bottom-30">< div flex ="5">< md-icon md-font-icon ="zmdi zmdi-email" style ="color:#47B2E8"<//md-icon></div>< div flex ="25">< label for ="email" translation> USER_MANAGEMENT.EMAIL.LABEL</label>:</div>< div flex>< span> {{vm.contact.email}}</span></div></div></div></md-dialog-content>< md-dialog-actions class ="user-management-card-footer" layout ="row">< span flex></span>< md-按钮class ="md-raised md-primary margin-left-0"ng-click ="vm.okClick()"aria-label ="{{USER_MANAGEMENT.BUTTON_OK |翻译}}"translation ="USER_MANAGEMENT.BUTTON_OK"></md-button></md-dialog-actions></md-dialog>//----------------------------------------------------------------------------------#users-dialog.controller.js#注意我们如何在下面注入联系人"，以便从#users-list.controller.js ....当地人:{联系人:联系人}对此#users-dialog.controller.js .... vm.contact =联系人；(功能() {使用严格"；角度的.module('app.lms.admin').controller('UserManagementDialogController'，UserManagementDialogController);/* @ngInject */函数UserManagementDialogController($窗口，$ mdDialog，$ log，接触) {var vm = this;vm.cancelClick = cancelClick;vm.okClick = okClick;vm.contact =联系人；vm.printClick = printClick;函数okClick(){$ mdDialog.hide();}函数cancelClick(){$ mdDialog.cancel();}函数printClick(){$ window.print();}}})();//---------------------------------------------------------------------------------- I'm still new at this, but I'm following a JSBIN that shows how it's done. The problem is that I have the same code, but when I click the button to open the dialog, I get what you see in the screenshot below. Can anyone point where I went wrong?
JSBIN I'm trying to learn from: http://jsbin.com/aDuJIku/2/edit?html,css,js,output
When I click the button "Open Modal Dialog" I get the following
html
<!DOCTYPE html>
<html ng-app="RecipeSite">
<head>
<title>Directives Practice</title>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="http://ngmaterial.assets.s3.amazonaws.com/svg-assets-cache.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="app.css">
<script src="app.js"></script>
</head>
<body>
<div class="container">
<div id="header">
<div class="row">
<div class="col-md-offset-3 col-md-6">
{{"Recipe Book"}}
</div>
</div> <!--end row-->
<hr class="hrstyle">
</div> <!--end header-->
<div class="links">
<div class="row">
<div class="col-md-offset-3 col-md-2">
<a ng-href="chicken-recipes.html">{{"Chicken"}}</a>
</div>
<div class="col-md-2">
<a ng-href="beef-recipes.html">{{"Beef"}}</a>
</div>
<div class="col-md-2">
<a ng-href="fish-recipes.html">{{"Fish"}}</a>
</div>
</div> <!--end row-->
</div> <!--end links-->
</div> <!--end container-->
<div class="container">
<div class="row">
<div class="recipeLoader">
<div class="col-md-3">
<div ng-view></div>
<div ng-controller='MyCtrl'>
<button ng-click='toggleModal()'>Open Modal Dialog</button>
<modal-dialog show='modalShown' width='400px' height='60%'>
<p>Modal Content Goes here<p>
</modal-dialog>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
app.js
var app = angular.module('RecipeSite', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider.when('/chicken-recipes.html', {
templateUrl: 'chicken-recipes.html'
})
.when('/beef-recipes.html', {
templateUrl:'beef-recipes.html'
})
.when('/fish-recipes.html', {
templateUrl: 'fish-recipes.html'
})
$locationProvider.html5Mode({
enabled:true,
requireBase:false
});
}]); <!--end config-->
app.directive('modalDialog', function() {
return {
restrict: 'E',
scope: {
show: '='
},
replace: true, // Replace with the template below
transclude: true, // we want to insert custom content inside the directive
link: function(scope, element, attrs) {
scope.dialogStyle = {};
if (attrs.width)
scope.dialogStyle.width = attrs.width;
if (attrs.height)
scope.dialogStyle.height = attrs.height;
scope.hideModal = function() {
scope.show = false;
};
},
template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay' ng-click='hideModal()'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><div class='ng-modal-close' ng-click='hideModal()'>X</div><div class='ng-modal-dialog-content' ng-transclude></div></div></div>"
};
});
app.controller('MyCtrl', ['$scope', function($scope) {
$scope.modalShown = false;
$scope.toggleModal = function() {
$scope.modalShown = !$scope.modalShown;
};
}]);
css
/*Dialog CSS*/
.ng-modal-overlay {
/* A dark translucent div that covers the whole screen */
position:absolute;
z-index:9999;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000000;
opacity: 0.8;
}
.ng-modal-dialog {
/* A centered div above the overlay with a box shadow. */
z-index:10000;
position: absolute;
width: 50%; /* Default */
/* Center the dialog */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
background-color: #fff;
box-shadow: 4px 4px 80px #000;
}
.ng-modal-dialog-content {
padding:10px;
text-align: left;
}
.ng-modal-close {
position: absolute;
top: 3px;
right: 5px;
padding: 5px;
cursor: pointer;
font-size: 120%;
display: inline-block;
font-weight: bold;
font-family: 'arial', 'sans-serif';
}
解决方案
Use $mdDialog to open a dialog in AngularJS.
Refer to the example below:
//------------------------------------------------------------------------------------
# users-list.tmpl.html
# Refer to the click event ... ng-click="vm.openContact(contact, $event)"
<table md-data-table class="md-data-table" md-progress="vm.deferred">
<thead md-order="vm.query.contact" md-trigger="vm.getUsers">
<tr>
<th name="Email" order-by="email" decend-first></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in vm.users>
<td width="20%">
<a style="cursor:pointer" ng-click="vm.openContact(contact, $event)">
{{contact.email}}
</a>
</td>
</tr>
</tbody>
</table>
//------------------------------------------------------------------------------------
# users-list.controller.js
# This is where your click event to open the dialog is
# i.e. function openContact(contact, $event) {...}
# templateUrl: 'app/foo/admin/users/users-dialog.tmpl.html' below shows the
# link to the dialog you want to open
(function() {
'use strict';
angular
.module('app.foo.admin')
.controller('UsersListController', UsersListController);
/* @ngInject */
function UsersListController(
$scope,
$state,
$mdDialog) {
var vm = this;
vm.loading = false;
vm.userSvc = userSvc;
vm.openContact = openContact;
activate();
function activate() {
// init users
vm.userSvc.get().then(
function(users) {
initSearchString(users);
vm.users = users;
},
function(error) {
$log.error(error);
}
);
}
function openContact(contact, $event) {
$mdDialog.show({
controller: 'UserManagementDialogController',
controllerAs: 'vm',
templateUrl: 'app/foo/admin/users/users-dialog.tmpl.html',
locals: {
contact: contact
},
targetEvent: $event,
clickOutsideToClose: true
});
}
}
})();
//----------------------------------------------------------------------------------
# users-dialog.tmpl.html
# Use <md-dialog></md-dialog> to open and close your dialog
# This is the dialog that will open when you click on the link in the table above i.e
# <a style="cursor:pointer" ng-click="vm.openContact(contact, $event)">{{contact.email}}</a>
<md-dialog class="contact-dialog mobile-fullwidth-dialog" flex="60" flex-xs="100">
<md-toolbar>
<div class="md-toolbar-tools">
<h2 flex >
<span translate>USER_MANAGEMENT.USER_INFORMATION</span>
</h2>
<md-button class="md-icon-button" ng-click="vm.cancelClick()" aria-label="cancel">
<md-icon md-font-icon="zmdi zmdi-close"></md-icon>
</md-button>
</div>
</md-toolbar>
<md-dialog-content class="md-dialog-content">
<div layout="row" layout-xs="column">
<div flex="50" flex-xs="100" layout="row" class="margin-bottom-30">
<div flex="5">
<md-icon md-font-icon="zmdi zmdi-email" style="color:#47B2E8"></md-icon>
</div>
<div flex="25">
<label for="email" translate>USER_MANAGEMENT.EMAIL.LABEL</label> :
</div>
<div flex>
<span>{{vm.contact.email}}</span>
</div>
</div>
</div>
</md-dialog-content>
<md-dialog-actions class="user-management-card-footer" layout="row">
<span flex></span>
<md-button
class="md-raised md-primary margin-left-0"
ng-click="vm.okClick()"
aria-label="{{USER_MANAGEMENT.BUTTON_OK | translate}}"
translate="USER_MANAGEMENT.BUTTON_OK">
</md-button>
</md-dialog-actions>
</md-dialog>
//----------------------------------------------------------------------------------
# users-dialog.controller.js
# Note how we inject 'contact' below so that your data will be injected from the
# users-list.controller.js .... locals: { contact: contact } to this
# users-dialog.controller.js .... vm.contact = contact;
(function() {
'use strict';
angular
.module('app.lms.admin')
.controller('UserManagementDialogController', UserManagementDialogController);
/* @ngInject */
function UserManagementDialogController(
$window,
$mdDialog,
$log,
contact) {
var vm = this;
vm.cancelClick = cancelClick;
vm.okClick = okClick;
vm.contact = contact;
vm.printClick = printClick;
function okClick() {
$mdDialog.hide();
}
function cancelClick() {
$mdDialog.cancel();
}
function printClick() {
$window.print();
}
}
})();
//----------------------------------------------------------------------------------
这篇关于在Angular中打开模态对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
