Click here to Skip to main content
15,881,281 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
HTML

XML
angular.module('Testmodule').directive('mymodalwindow', function () {
    return {
        restrict: 'E',
        template: '<div class="modal" id="mytestModal" role="dialog"  aria-labelledby="myModalLabel">' +
     '       <div class="modal-dialog modal-sm ">' +
    '                <div class="modal-content">' +
      '              <div class="modal-header">' +
       '                 <h4 class="modal-title" id="myModalLabel">Confirmation</h4>' +
        '            </div>' +
         '           <div class="modal-body">' +
         '              Do you want to delete the {{screenname}} "{{selecteditemtest}}" ?' +

           '         </div>' +
            '        <div class="modal-footer">' +

             '           <button type="button" id="btn" class="btn btn-default" data-ng-click="delete()"data-dismiss="modal">Delete</button>' +
              '          <button type="button" id="btn" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
               '     </div>' +
                '</div>' +
            '</div>' +
        '</div>'
    };
});
Posted
Updated 17-Aug-15 20:35pm
v3

1 solution

XML
<div my-modal-window on-delete="onDelete()"></div> //You can pass params here . onDelete() function can be any function in your controller


----------Directive code-----

XML
angular.module('Testmodule').directive('mymodalwindow', function () {
    return {

        restrict: 'E',
        scope: {
            onDelete: '&'
        },
        link: function (scope, elem, attrs) {
            scope.delete = function () {
                scope.onDelete(); // You can pass parameter like scope.onDelete({param1:'dsadasd',param2:'sadasjdlkjakl'});
            }
        },
        template: '<div class="modal" id="mytestModal" role="dialog"  aria-labelledby="myModalLabel">' +
            '       <div class="modal-dialog modal-sm ">' +
            '                <div class="modal-content">' +
            '              <div class="modal-header">' +
            '                 <h4 class="modal-title" id="myModalLabel">Confirmation</h4>' +
            '            </div>' + `enter code here`
        '           <div class="modal-body">' +
        '              Do you want to delete the {{screenname}} "{{selecteditemtest}}" ?' +
        '         </div>' +
        '        <div class="modal-footer">' +

        '           <button type="button" id="btn" class="btn btn-default" data-ng-click="delete()"data-dismiss="modal">Delete</button>' +
        '          <button type="button" id="btn" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
        '     </div>' +
        '</div>' +
        '</div>' +
        '</div>'
    };
});
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900