Keshav1007 Keshav1007 - 2 months ago 5
Javascript Question

Same directive with different message - angularJS

I have buttons like submit, reject and cancel. If i click on this button a small div with comment shows up and a ok and cancel button will be shown. On click of ok popup with 'are you sure' message popups up.

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


I am using a popup modal directive like this for the small div as i mentioned above:

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


Now I want to change the msg on click of each button. Suppose if i click 'Submit' my msg should be 'are you sure to submit' if i click 'reject' my msg should be 'are you sure to reject'.

directive:

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'
});
});
}
});


How to achieve this? I will not be able to post the code here.

Answer
<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>

In you main controller:

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'
    }
});

In directives Link function

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

Comments