【发布时间】:2016-02-23 05:16:30
【问题描述】:
我有一个 Angularjs 应用程序。我有一个单击提交按钮的表单我正在打开一个ngModal 弹出窗口。我不知道如何处理模态窗口中存在的按钮单击事件。我已附上以下代码以供参考:
在我的控制器内部:
$scope.ModelValue="Username:"
$scope.displayModal = function () {
ngDialog.open({template: 'app/modal/modal.html', scope: $scope});
}
在我的 Modal.html 中
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header primary">
<h4 class="modal-title" id="myModalLabel">Confirmation</h4>
</div>
<div id= "modal-section" class="modal-body">
{{ModelValue}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Confirm</button>
</div>
</div>
</div>
在我的指令中:
'use strict';
angular.module('myApp')
.directive('modal', function ($parse) {
return {
template: '<div class="modal fade">' +
'<div class="modal-dialog">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>' +
'<h4 class="modal-title">{{ title }}</h4>' +
'</div>' +
'<div class="modal-body" ng-transclude></div>' +
'</div>' +
'</div>' +
'</div>',
restrict: 'E',
transclude: true,
replace:true,
scope:true,
link: function postLink(scope, element, attrs) {
scope.title = attrs.title;
scope.$watch(attrs.visible, function(value){
if(value == true)
element.modal('show');
else
element.modal('hide');
});
$(element).on('shown.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = true;
});
});
$(element).on('hidden.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = false;
});
});
}
};
});
请告诉我如何处理确认和关闭按钮事件单击。单击确认按钮时,我需要在父控制器中处理我打开对话框的事件。
【问题讨论】:
-
为此指令创建一个
controller并为该控制器中的方法编写代码
标签: angularjs angularjs-directive angularjs-scope angularjs-ng-model