如何在 Angular 中添加可重用的模态对话框? [英] How do I add a reusable modal dialog in Angular?
问题描述
我是 Angular 的新手,正在尝试实现 这个解决方案 到我的项目中.
I'm new to Angular and attempting to implement this solution into my project.
它看起来很简单,但是,我正试图将它变成一个可重用的元素,以便我可以从任何地方调用它并传入要显示的内容(否则,有什么意义?).
It looks painfully easy, however, I'm trying to make this into a re-usable element so that I can call it from anywhere and just pass in the content to be shown (otherwise, what's the point?).
所以,我的具体问题是:假设我已经有一个绑定到某个 DOM 元素的 controller
并且它具有获取一些 factory
驱动的 的功能>$http
调用并在响应时我希望通过此对话框通知用户某事,如何将 *this 指令和 *this 控制器与我现有的指令结合起来,以及如何以允许的方式进行操作然后我从一个完全不同的 controller
再次使用它?
So, my specific question is: assuming I already have a controller
that's bound to some DOM element and it has a feature that goes and fetches some factory
driven $http
call and upon the response I wish to notify the user via this dialog of something, how do I combine *this directive and *this controller with my existing one and how do I do it in a way that allows me to then use it again from a totally different controller
?
或者这可能是这个用途的一个坏例子,我应该看一个不同的例子吗?
Or is this perhaps a bad example for this use and should I be looking at a different one?
推荐答案
与其他选项相比,下面给出了极简主义的方法,使用角度工厂.请参阅下面的示例片段.
Compared to other options, below given the minimalist approach, using angular factory. See a sample snippet below.
注意:使用 Angular JS 和 UI Bootstrap - AngularUI.
Note: using Angular JS with UI Bootstrap - AngularUI.
- 可重复使用的模式视图 - ConfirmationBox.html
<div class="modal-header">
<h3 class="modal-title">{{title}}</h3>
</div>
<div class="modal-body">
{{message}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-warn" data-ng-click="ok(); $event.stopPropagation()">OK</button>
<button type="button" class="btn btn-default" data-ng-click="cancel(); $event.stopPropagation()">Cancel</button>
</div>
- 可重用模块和共享工厂,用于处理可重用的模态对话框
angular.module('sharedmodule',['ui.bootstrap', 'ui.bootstrap.tpls'])
.factory("sharedService",["$q", "$modal", function ($q, $modal)
{
var _showConfirmDialog = function (title, message)
{
var defer = $q.defer();
var modalInstance = $modal.open({
animation: true,
size: "sm",
templateUrl: 'ConfirmationBox.html',
controller: function ($scope, $modalInstance)
{
$scope.title = title;
$scope.message = message;
$scope.ok = function ()
{
modalInstance.close();
defer.resolve();
};
$scope.cancel = function ()
{
$modalInstance.dismiss();
defer.reject();
};
}
});
return defer.promise;
}
return {
showConfirmDialog: _showConfirmDialog
};
}]);
- 部分视图,使用共享模式对话框
<a data-ng-click="showConfirm()">Go Back to previous page</a>
- 视图控制器,打开共享的可重用模式对话框并处理通知(确定和取消)
var myModule = angular.module("mymodule", ['sharedmodule', 'ui.bootstrap', 'ui.bootstrap.tpls']);
myModule.controller('myController', ["$scope", "sharedService", "$window",
function ($scope, sharedService, $window)
{
$scope.showConfirm = function ()
{
sharedService.showConfirmDialog(
'Confirm!',
'Any unsaved edit will be discarded. Are you sure to navigate back?')
.then(function ()
{
$window.location = '#/';
},
function ()
{
});
};
}]);
这篇关于如何在 Angular 中添加可重用的模态对话框?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!