<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js@1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="//cdn.jsdelivr.net/alertifyjs/1.6.1/alertify.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<button cancel-item="1">Open Prompt</button>
</body>
</html>
// Code goes here
var app = angular.module('app', []);
app
.directive('cancelItem', ['$rootScope', '$compile',
function ($rootScope, $compile) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var item_id = attrs.cancelItem;
var templateElement = '<p>Are you sure you wish to CANCEL the item ' + item_id + '?</p>' +
'<select class="ajs-input" ng-model="reason">' +
'<option ng-value="Reason 1">Option one</option>' +
'<option ng-value="Reason 2">Option two</option>' +
'<option ng-value="Reason 3">Option three</option>' +
'</select>' +
'<input class="ajs-input" type="text" ng-bind="reason">';
scope.reason = '';
element.bind('click', function (event) {
event.stopPropagation();
alertify.prompt(
function (e, reason) {
if (reason === '') {
e.cancel = true;
} else {
alertify.message('Done!');
}
},
function () {
return;
}
)
.setContent(
'<div id="alertify"><p>Are you sure you wish to CANCEL the item ' + item_id + '?</p>' +
'<select class="ajs-input" ng-model="reason">' +
'<option ng-value="Reason 1">Option one</option>' +
'<option ng-value="Reason 2">Option two</option>' +
'<option ng-value="Reason 3">Option three</option>' +
'</select>' +
'<input class="ajs-input" type="text" ng-bind="reason"></div>'
);
});
$compile(angular.element(".alertify").html())(scope);
scope.$on('$destroy', function() {
element.unbind();
});
}
};
}]);
/* Styles go here */