Slide 129 - Creating new directives

snippet.html

<div data-ng-app="app">
<div class='html-content'><div data-ng-init="login='Bob'">
	<button class="btn" data-ng-click="login=''" data-confirm-click data-message="Are you sure ? ">Reset login</button>
	Login: {{login}}
</div></div></div>

snippet.js

angular.module('app',['ui.bootstrap'])
.directive('confirmClick', function($modal) {
    return {
        restrict: 'A',
        priority: '10',
        terminal: true,
        link: function(scope, elm, attrs) {
            var button = elm[0];
            
            angular.element(button).on("click", function($event){
                $event.preventDefault();
                $event.stopPropagation();
                $modal.open({
                    template : "<div>"+
                    "<div class='modal-body'>" + attrs.message + "</div>"+
                    "<div class='modal-footer'>"+
                        "<button class='btn btn-primary' data-ng-click='confirm()'>OK</button>"+
                        "<button class='btn btn-warning' data-ng-click='cancel()'>KO</button>"+
                    "</div>"+
                 "</div>", 
                    controller : function($scope, $modalInstance){
                        $scope.confirm = function(){
                            scope.$eval(attrs.ngClick);
                            $modalInstance.dismiss('cancel');
                        }
                        $scope.cancel = function(){
                            $modalInstance.dismiss('cancel');
                        }
                    }
                });
            });
        }
    };
});