我有一个模态弹出窗口，我用过，我不知道如何从这个当前模态创建一个通用服务或指令。我已经在我的生活中建立了一些指令，所以我知道如何构建它。 我需要建议如何处理以下模态弹出窗口：
<button id="GoBtn" class="btn btn-primary btn-md">GO</button>
<div id="blackout"></div>
<div id="popup">
<span class="close"></span>
<span id="spinner" class="loading style-1"></span>
<div id="content">
<table id="content_table" cellpadding="10" cellspacing="10" border="1">
<tr>
<th></th>
<th>Id</th>
<th>Source</th>
<th>IsValid</th>
<th>Sampling Date</th>
</tr>
<tr ng-repeat="item in collection">
<td>
<input class="dga_radio" id="dga-radio-{{$index}}" type="radio" name="dga" value="{{$index}}" ng-model="selectedDga.index" />
<label for="dga-radio-{{$index}}" ><span></span></label>
</td>
<td ng-repeat="(key,value) in item">
{{value}}
</td>
</tr>
</table>
</div>
<div id="warning-message">
<img src="../images/sign.png" width="32px" height="32px" />
<span id="wmessage"></span>
</div>
<button id="okbtn" class="btn btn-success btn-md">ok</button>
<button id="cancelbtn" class="btn btn-danger btn-md">cancel</button>
</div>
逻辑本身就在控制器内部：
$("#blackout, .close").click(function () {
$("#blackout").removeClass("visable");
$("#popup").removeClass("visable");
});
$("#GoBtn").click(function () {
var wmessage_container = $('#warning-message');
var wmessage = $('#warning-message > #wmessage');
startDate = $("#datepicker-start").val();
endDate = $("#datepicker-end").val();
var content = $("#content");
console.log('reach here!');
$scope.collection = [];
if ((angular.isDefined(startDate) && startDate != '') && (angular.isDefined(endDate) && endDate != '')) {
console.log('case 1');
//check if startDate and endDate are valid
if (startDate > endDate) {
console.log('wmessage_container', wmessage_container);
wmessage_container.show();
$("#spinner").css('display', 'none');
content.css('display', 'none');
wmessage.text('start date and end date values are invalid!');
console.log('startDate is bigger than end date');
}
else {
var promise = dataFactory.getDGAList(startDate, endDate);
wmessage_container.css('display', 'none');
content.show();
promise.then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
console.log('success callback');
console.log('response.status ', response.status);
console.log('response.data', response.data);
console.log('response.headers', response.headers);
console.log('response.config', response.config);
$("#spinner").css('display', 'none');
if (response.status == 200) {
$scope.collection = response.data;
}
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
content.hide();
$("#spinner").css('display', 'none');
wmessage.text('No relevant Data found in requested dated ,\nPlease try other date range !');
wmessage_container.show();
console.log('error Callback');
console.log('response.data', response.data);
console.log('response.headers', response.headers);
console.log('response.config', response.config);
});
}
//call DataFactory service.
} else {
wmessage_container.show();
content.hide();
$("#spinner").css('display', 'none');
if ((startDate == '' || !angular.isDefined(startDate)) && (endDate == '' || !angular.isDefined(endDate))) {
console.log('case 2');
wmessage.text('start date and end date are required !');
}
else if (startDate == '' || !angular.isDefined(startDate)) {
console.log('case 3');
wmessage.text('start date is required !');
} else {
console.log('case 4');
wmessage.text('end date is required !');
}
}
console.log('startDate', startDate);
console.log('endDate', endDate);
$("#blackout").addClass("visable");
$("#popup").addClass("visable");
});
$('#okbtn').click(function () {
var selectedDGA = $scope.collection[$scope.selectedDga.index];
$("#blackout").removeClass("visable");
$("#popup").removeClass("visable");
var promise = dataFactory.getDGASummary(selectedDGA["Id"]);
promise.then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
console.log('success callback');
console.log('response.status ', response.status);
console.log('response.data', response.data);
console.log('response.headers', response.headers);
console.log('response.config', response.config);
console.log('response.data[IEEE]'+response.data['IEEE']);
generateIEEE(response.data['IEEE']);
generateIEC(response.data['IEC']);
generateCIGRE(response.data['CIGRE443']);
generateTOA(response.data['TOA']);
generateNEI(response.data['NEI']);
generatePTX(response.data['PTX']);
generateCOCO2Ratio(response.data['CoCo2Ratio']);
generateDuvalTriangle(response.data['DuvalTriangle']);
generateDuvalPentgons(response.data['DuvalPentagon']);
var arr = response.data['DgaSample']['Results'];
console.log('arr', arr);
$scope.gases_table = arr;
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
console.log('promise callback');
console.log('response.data', response.data);
console.log('response.headers', response.headers);
console.log('response.config', response.config);
});
});
$('#cancelbtn').click(function () {
$("#blackout").removeClass("visable");
$("#popup").removeClass("visable");
})
css
#blackout {
right: 0;
top: 0;
opacity: 0;
width: 100vw;
height: 100vh;
position: fixed;
visibility: hidden;
background: rgba(0, 0, 0, 0.8);
transition: z-index 500ms, visibility 800ms, opacity 1000ms;
}
#blackout.visable {
opacity: 1;
z-index: 8;
visibility: visible;
}
#popup {
opacity: 0;
top: -250px;
left: -300px;
width: 600px;
height: 250px;
padding: 15px;
position: fixed;
border-radius: 5px;
margin: -125px 0 0 50%;
background: rgb(248, 248, 248);
transition: top 550ms, opacity 500ms, z-index 500ms;
}
#popup.visable {
top: 50%;
opacity: 1;
z-index: 9;
}
#popup .close {
top: -10px;
width: 30px;
height: 30px;
right: -10px;
cursor: pointer;
position: absolute;
border-radius: 15px;
background: rgb(255, 255, 255);
background-image: url(http://imgh.us/close_1.svg); /**TODO: transfer it to relative path**/
background-size: contain;
}
#popup .close:hover {
background-image: url(http://imgh.us/close_hover.svg); /**TODO: transfer it to relative path**/
}
#popup > #okbtn{
position:absolute;
bottom: 2%;
right: 35%;
width: 60px;
cursor:pointer;
}
#popup > #cancelbtn{
position:absolute;
bottom: 2%;
right: 50%;
width: 60px;
cursor:pointer;
}
#GoBtn{
width: 60px;
}
#warning-message{
position:absolute;
padding:0;
margin-top: 15%;
width: 100%;
padding-right: 30px;
text-align: center;
}
#wmessage{
font-family:'Segue UI', Calibri, arial, verdana, sans-serif;
font-size: 20px;
font-weight:normal;
margin:0;
padding: 5px;
}