Question

我在制作弹出窗口的指令中有一些逻辑。我有按钮在指令中触发它我想用来触发模态，但我不希望它们存在于指令中。控制器包含一个具有不同警报类型和相关数据的对象：alertBoxMessages，该指令如下所示。

//controller is up here
})
.directive('ghopAlertBox', [function(){
        return {
            restrict: 'E',
            scope: {
                alertBoxMessages: '='
            },
            templateUrl: 'myAlert.html',
            link: function(scope){
                scope.alertShown = false;
                scope.showAlert = function (alertObj) {
                    scope.currentAlertBoxMessage = scope.alertBoxMessages[alertObj];
                    scope.alertShown = true;

                };
               scope.closeAlert = function (closeMessage) {
                   closeMessage = closeMessage || false;
                   scope.alertShown = false;
                   document.querySelector("#result").innerHTML = closeMessage;

                };
            }
        };
    }]);

HTML

<body ng-app="myAlert" ng-controller="alertBox">

<button id="successBtn" ng-click="showAlert('saveSuccess')" alert-box-messages="alertBoxMessages">Success Alert</button>
<button id="warnBtn" ng-click="showAlert('confirmWarning')">Warning Alert</button>
<button id="errorBtn" ng-click="showAlert('fofError')">Error Alert</button>
<div id="result"></div>
<alert-box alert-box-messages="alertBoxMessages"></alert-box>

</body>

当按钮位于HTML部分<alert-box>内时，它可以正常工作，但当我将它们取出时，点击上没有任何反应。我该如何解决这个问题？

从指令中删除按钮时，ng-click失败

0 个答案: