指令文件
alertModule.directive("alertDirective", ["AlertUser", function (AlertUser) {
return {
restrict: 'AE',
template: '\
<style>\
.overlay {\
height: 100%;\
width: 100%;\
position: fixed;\
z-index: 1000;\
top: 0;\
left: 0;\
background-color: rgb(0,0,0);\
background-color: rgba(0,0,0, 0.2);\
overflow-y: hidden;\
}\
.overlay-content {\
position: relative;\
top: 25%;\
width: 100%;\
text-align: center;\
margin-top: 30px;\
}\
</style>\
<div class="overlay" ng-show="showAlert">\
<div id="custom-alert-popup" class="alertMessage z-depth-1 bg_white">\
<div class="{{headerClass}} color_white">\
<div class="popup-head-white center-align cursor_default color_white line_height2p5">{{headerText}}</div>\
</div>\
<div class="popup_workareas_inner">\
<div align="center" class="margin_top2v9h font_size14">\
<img src="lib/fonts/{{alertImage}}.svg"/>\
</div>\
<div class="popup-subhead center-align cursor_default margin_top1vh">\
<span class="font_color_767d94">{{message}} </span>\
</div>\
<div class="md_button margin_top2p6vh margin-bottom8p8vh">\
<md-button class="waves-effect float_right margin_right_p25" ng-click="closeAlert()">\
<span md-autofocus>OK</span>\
</md-button>\
</div>\
</div>\
</div>\
</div>',
link: function (scope, element, attrs) {
scope.showAlert = false;
scope.message = null;
scope.headerClass = 'alert_red';
scope.alertImage = 'Hold';
scope.headerText = 'Alert!';
scope.closeAlert = function () {
// console.log('show alert1', scope.showAlert)
scope.showAlert = false;
// console.log('show alert2', scope.showAlert)
};
scope.closeAlertEnter = function(event) {
console.log("test")
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode) {
scope.showAlert = false;
}
}
scope.$on('closeAlert',function(){
scope.closeAlert()
})
// Extending the alert service object to show alert
angular.extend(AlertUser, {
showAlert: function (msg, headerClass, image, headerText) {
scope.showAlert = true;
scope.message = msg;
scope.alertImage = image;
scope.headerText = headerText;
scope.headerClass = scope.headerText === "Success!" ? "alert_green" : "alert_red";
}
})
}
}
}]);
控制器文件
AlertUser.alert('Duplicate Taxonomy');
window.addEventListener("keydown",function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode === 13) {
$rootScope.$broadcast('closeAlert');
}
},true)
将从控制器文件中打开警报弹出窗口。然后,我尝试通过广播从控制器文件中按Enter键关闭警报。指令文件的showAlert值按预期更改,但页面未呈现更改。广播的值已在指令内部正确接收。