Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
oly-dialog
Advanced tools
<dialog>
elementsLets you use and control <dialog>
elements from your Angular code.
<dialog>
provides a browser native way to show both modal and
non-modal dialogs, which may optionally return a value. <dialog>
is a part
of the HTML5.1 spec. For more information on the <dialog>
element, see this
blog post by treehouse.
If you need to support browsers that haven't yet implemented <dialog>
,
consider using Google's excellent dialog polyfill.
This directive will detect that the polyfill is installed and automatically
register <dialog>
elements for you.
npm install --save oly-dialog
Once you have installed oly-dialog, include it in your project however you like, e.g. with browserify or by including dist/oly-dialog.js on your page.
Then, add oly-dialog to the dependencies of your angular module.
var olyDialog = require('oly-dialog');
angular.module('yourApp', [olyDialog]);
angular.module('yourApp', ['oly.dialog']);
You can use an oly-dialog just like you would use a regular dialog.
<dialog>
<!-- your content here -->
</dialog>
Content is transcluded and has access to the scope which the dialog is created in.
You can access the controller for the dialog from angular code by require
ing
it from a child directive like so:
module.directive('yourDirective', function() {
return {
require: '^dialog',
link: function(scope, element, attrs, dialogCtrl) {
// your directive
}
};
});
Alternatively, you can provide a name for your dialog. You can then use this
name to get a reference to the dialog controller from the DialogRegistry
.
<dialog name="dialog name">
<!-- your content here -->
</dialog>
module.service('YourService', ['DialogRegistry', function(dialogRegistry) {
var dialogCtrl = dialogRegistry.getDialog('dialog name');
}]);
The name can be a regular attribute or an Angular expression.
If you have access to the dialog controller, you can use it to show the dialog.
The show()
method returns a promise which will resolve with the return value
set when the dialog is closed. If no return value is provided, the promise will
reject.
dialogCtrl.show()
.then(function(returnValue) {
// do something with return value
})
.catch(function() {
// do something if value not specified
})
.finally(function() {
// always do something when the dialog is closed
});
The show
method is defined as such:
show([modal], [anchor])
Argument | Type | Description |
---|---|---|
modal (optional) | (bool) default: true | if true, the dialog will be modal (prevent interaction with other elements on the page). |
anchor (optional) | Element or MouseEvent | the anchor for the dialog (not currently implemented in browsers). |
Showing the dialog can also be achieved with the oly-dialog-show
directive,
which can be used either as an element or an attribute.
<oly-dialog-show for="dialog name" modal="true" anchor=".anchor-selector"></oly-dialog-show>
The modal and anchor attributes are optional. The anchor is given as a selector. If the selector matches multiple DOM elements, the first match is used as the anchor.
The dialog controller can also be used to close the dialog.
dialogCtrl.close(returnValue);
The returnValue
is optional and is the value that is used to resolve the
promise returned by the show()
method. If no returnValue
is specified then
the promise is rejected.
Closing the dialog can also be achieved using the oly-dialog-close
directive,
which can be used either as an element or an attribute. This directive must be
used as a child of the <dialog>
element.
<oly-dialog-close return="expression"></oly-dialog-close>
The return
attribute is bound to the expression given and will be used as the
returnValue for the close()
method.
Type: emit
Target: dialog containing scope
Arguments: dialog controller instance
Type: emit
Target: dialog containing scope
Arguments: dialog controller instance
FAQs
An angular wrapper for the HTML5 <dialog> element
The npm package oly-dialog receives a total of 3 weekly downloads. As such, oly-dialog popularity was classified as not popular.
We found that oly-dialog demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.