指令中的值更改时页面不呈现

时间:2018-11-14 07:07:00

标签: javascript angularjs angularjs-directive

指令文件

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值按预期更改,但页面未呈现更改。广播的值已在指令内部正确接收。

0 个答案:

没有答案