我是Angular的新手并试图在我的项目中实现
this solution.
它看起来非常简单,但是,我试图将它变成一个可重用的元素,这样我就可以从任何地方调用它并只传入要显示的内容(否则,重点是什么？).
所以,我的具体问题是：假设我已经有一个绑定到某个DOM元素的控制器,并且它有一个功能,可以获取一些工厂驱动的$http调用,并且在响应时我希望通过此对话框通知用户,如何将*此指令与*此控制器与现有控制器结合使用？如何以一种允许我从完全不同的控制器再次使用它的方式进行操作？
或者这可能是这种用法的一个不好的例子,我应该看一个不同的？
与其他选项相比,下面给出了极简主义的方法,使用角度工厂.请参阅下面的示例代码段.
注意：使用Angular JS和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 ()
{
});
};
}]);
