具有不同消息的相同指令 - angularJS答案

【问题标题】：Same directive with different message - angularJS具有不同消息的相同指令 - angularJS
【发布时间】：2016-09-29 10:41:45
【问题描述】：

我有提交、拒绝和取消等按钮。如果我单击此按钮，将显示一个带有注释的小 div，并显示一个确定和取消按钮。单击确定弹出窗口时会弹出“你确定”消息。

<button type="button" ng-click="showDiv = !showDiv">Submit
</button>
<button type="button" ng-click="showDiv = !showDiv">Reject
</button>

我正在为上面提到的小 div 使用这样的弹出模式指令：

<div ng-show="showDiv">
 <yes-no msg="are you sure"></yes-no>
</div>

现在我想在点击每个按钮时更改消息。假设如果我点击“提交”，我的消息应该是“你确定要提交”，如果我点击“拒绝”，我的消息应该是“你确定要拒绝”。

指令：

mainapp.directive('yesNo', function($modal){
    return {
        restrict: 'A',
        scope: {
            msg: '@msg'
        },
        link: linkFn
    };

    function linkFn(scope, element, attrs) {
        var msg = attrs.msg;
        var modalTemplate =  '<div class="modal-content">' +
                        '   <div class="modal-body">' +
                        '       <h4 class="modal-title">' + msg + '</h4>' +
                        '   </div>';
           var modalInstance = $modal.open({
               template: modalTemplate,
               controller: 'yesNoModalCtrl'
           });
       });
    }
});

如何做到这一点？我将无法在此处发布代码。

【问题讨论】：

将数据添加到您的指令 submit-msg 和 reject-msg
为什么不能在这里发布代码？至少包括一些相关代码，否则我无法在这里发布答案。
@Weedoze 我想根据按钮点击显示消息。如果我点击提交，那么如何确定我是否点击了提交按钮？
@devqon 我会尝试发布一些相关代码
@devqon 我已经发布了示例代码。

标签： javascript angularjs angularjs-directive

【解决方案1】：

<input type="button" name="submit" ng-click="buttonclick('are you sure to submit')"/>

<input type="button" name="reject" ng-click="buttonclick('are you sure to reject')"/>

<div ng-show="showDiv">
 <yes-no msg={{message}}></yes-no>
</div>

在你的主控制器中：

app.controller("mainController", function($scope){

$scope.message="";
$scope.buttonclick = function(msg){
   $scope.message= msg;
}
});
app.directive("yesNo", function(){
     return{
     restrict: 'E',
     scope:{
     msg:'@'
    }, 
    link: linkFn,
    controller: 'yesNoModalCtrl'
    }
});

在指令链接函数中

function linkFn(scope, element, attrs) {

    attrs.$observe('msg', function(msg) {
        // this function gets triggered each time "msg" is changed
        // You can do whatever you want here
        if (msg) {
            var modalTemplate = '<div class="modal-content">' +
                '   <div class="modal-body">' +
                '       <h4 class="modal-title">' + msg + '</h4>' +
                '   </div>';
            var modalInstance = $modal.open({
                template: modalTemplate,
                controller: 'yesNoModalCtrl'
            });
        }

    });
}

plunker

【讨论】：

但我在弹出窗口中收到的消息为空白
您是否在范围内声明了消息？
是的。现在我已经更改了您给出的代码。即使现在我收到的消息也是空白
谢谢，它可以工作，但我得到了两个相同的 popus :( 我已经尝试取消绑定点击事件，但我仍然得到两个 popus。
我的错误是我在错误的地方解绑了。它就像一个魅力非常感谢拉维:)

【解决方案2】：

创建一个控制器函数：

$scope.showModal = function(msg) {
    $scope.showDiv = !$scope.showDiv;
    $scope.msg = msg;
}

在你的按钮中：

<button type="button" ng-click="showModal('Are you sure')">Submit
</button>
<button type="button" ng-click="showModal('Some other text')">Reject
</button>

<div ng-show="showDiv">
    <yes-no msg="msg"></yes-no>
</div>

【讨论】：