Per Ploug Krogslund
141 lines
6.4 KiB
HTML
141 lines
6.4 KiB
HTML
<h1><code ng:non-bindable="">dialogService</code>
|
||
<span class="hint">(service in module <code ng:non-bindable="">umbraco.services</code>
|
||
)</span>
|
||
</h1>
|
||
<div><h2 id="Description">Description</h2>
|
||
<div class="description"><p>Application-wide service for handling modals, overlays and dialogs
|
||
By default it injects the passed template url into a div to body of the document
|
||
And renders it, but does also support rendering items in an iframe, incase
|
||
serverside processing is needed, or its a non-angular page</p>
|
||
|
||
<h2 id="usage">usage</h4>
|
||
|
||
<p>To use, simply inject the dialogService into any controller that needs it, and make
|
||
sure the umbraco.services module is accesible - which it should be by default.</p>
|
||
|
||
<pre class="prettyprint linenums">
|
||
var dialog = dialogService.open({template: 'path/to/page.html', show: true, callback: done});
|
||
functon done(data){
|
||
//The dialog has been submitted
|
||
// data contains whatever the dialog has selected / attached
|
||
}
|
||
</pre> </p></div>
|
||
<h2 id="Dependencies">Dependencies</h2>
|
||
<ul class="dependencies"><li><code ng:non-bindable=""><a href="api/$rootScope">$rootScope</a></code>
|
||
</li>
|
||
<li><code ng:non-bindable=""><a href="api/$compile">$compile</a></code>
|
||
</li>
|
||
<li><code ng:non-bindable=""><a href="api/$http">$http</a></code>
|
||
</li>
|
||
<li><code ng:non-bindable=""><a href="api/$log">$log</a></code>
|
||
</li>
|
||
<li><code ng:non-bindable=""><a href="api/$q">$q</a></code>
|
||
</li>
|
||
<li><code ng:non-bindable=""><a href="api/$templateCache">$templateCache</a></code>
|
||
</li>
|
||
</ul>
|
||
<div class="member method"><h2 id="Methods">Methods</h2>
|
||
<ul class="methods"><li><h3 id="close">close(dialog)</h3>
|
||
<div class="close"><p>Closes a specific dialog</p><h4 id="Parameters">Parameters</h4>
|
||
<ul class="parameters"><li><code ng:non-bindable="">dialog {Object} </code>
|
||
<p>the dialog object to close</p></li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li><h3 id="closeAll">closeAll()</h3>
|
||
<div class="closeall"><p>Closes all dialogs</p></div>
|
||
</li>
|
||
<li><h3 id="contentPicker">contentPicker(options)</h3>
|
||
<div class="contentpicker"><p>Opens a content picker tree in a modal, the callback returns an array of selected documents</p><h4 id="Parameters">Parameters</h4>
|
||
<ul class="parameters"><li><code ng:non-bindable="">options {Object} </code>
|
||
<p>content picker dialog options object</p></li>
|
||
<li><code ng:non-bindable="">options.scope {$scope} </code>
|
||
<p>dialog scope</p></li>
|
||
<li><code ng:non-bindable="">options.callback {Function} </code>
|
||
<p>callback function</p></li>
|
||
</ul>
|
||
<h4 id="Returns">Returns</h4>
|
||
<div class="returns"><code ng:non-bindable="">{Object}</code>
|
||
– <p>modal object</p></div>
|
||
</div>
|
||
</li>
|
||
<li><h3 id="macroPicker">macroPicker(options)</h3>
|
||
<div class="macropicker"><p>Opens a mcaro picker in a modal, the callback returns a object representing the macro and it's parameters</p><h4 id="Parameters">Parameters</h4>
|
||
<ul class="parameters"><li><code ng:non-bindable="">options {Object} </code>
|
||
<p>mediapicker dialog options object</p></li>
|
||
<li><code ng:non-bindable="">options.scope {$scope} </code>
|
||
<p>dialog scope</p></li>
|
||
<li><code ng:non-bindable="">options.callback {Function} </code>
|
||
<p>callback function</p></li>
|
||
</ul>
|
||
<h4 id="Returns">Returns</h4>
|
||
<div class="returns"><code ng:non-bindable="">{Object}</code>
|
||
– <p>modal object</p></div>
|
||
</div>
|
||
</li>
|
||
<li><h3 id="mediaPicker">mediaPicker(options)</h3>
|
||
<div class="mediapicker"><p>Opens a media picker in a modal, the callback returns an array of selected media items</p><h4 id="Parameters">Parameters</h4>
|
||
<ul class="parameters"><li><code ng:non-bindable="">options {Object} </code>
|
||
<p>mediapicker dialog options object</p></li>
|
||
<li><code ng:non-bindable="">options.scope {$scope} </code>
|
||
<p>dialog scope</p></li>
|
||
<li><code ng:non-bindable="">options.callback {Function} </code>
|
||
<p>callback function</p></li>
|
||
</ul>
|
||
<h4 id="Returns">Returns</h4>
|
||
<div class="returns"><code ng:non-bindable="">{Object}</code>
|
||
– <p>modal object</p></div>
|
||
</div>
|
||
</li>
|
||
<li><h3 id="open">open(options)</h3>
|
||
<div class="open"><p>Opens a modal rendering a given template url.</p><h4 id="Parameters">Parameters</h4>
|
||
<ul class="parameters"><li><code ng:non-bindable="">options {Object} </code>
|
||
<p>rendering options</p></li>
|
||
<li><code ng:non-bindable="">options.container {DomElement} </code>
|
||
<p>the DOM element to inject the modal into, by default set to body</p></li>
|
||
<li><code ng:non-bindable="">options.callback {Function} </code>
|
||
<p>function called when the modal is submitted</p></li>
|
||
<li><code ng:non-bindable="">options.template {String} </code>
|
||
<p>the url of the template</p></li>
|
||
<li><code ng:non-bindable="">options.animation {String} </code>
|
||
<p>animation csss class, by default set to "fade"</p></li>
|
||
<li><code ng:non-bindable="">options.modalClass {String} </code>
|
||
<p>modal css class, by default "umb-modal"</p></li>
|
||
<li><code ng:non-bindable="">options.show {Bool} </code>
|
||
<p>show the modal instantly</p></li>
|
||
<li><code ng:non-bindable="">options.scope {Object} </code>
|
||
<p>scope to attach the modal to, by default rootScope.new()</p></li>
|
||
<li><code ng:non-bindable="">options.iframe {Bool} </code>
|
||
<p>load template in an iframe, only needed for serverside templates</p></li>
|
||
<li><code ng:non-bindable="">options.width {Int} </code>
|
||
<p>set a width on the modal, only needed for iframes</p></li>
|
||
<li><code ng:non-bindable="">options.inline {Bool} </code>
|
||
<p>strips the modal from any animation and wrappers, used when you want to inject a dialog into an existing container</p></li>
|
||
</ul>
|
||
<h4 id="Returns">Returns</h4>
|
||
<div class="returns"><code ng:non-bindable="">{Object}</code>
|
||
– <p>modal object</p></div>
|
||
</div>
|
||
</li>
|
||
<li><h3 id="propertyDialog">propertyDialog(options, editor, value)</h3>
|
||
<div class="propertydialog"><p>Opens a dialog with a chosen property editor in, a value can be passed to the modal, and this value is returned in the callback</p><h4 id="Parameters">Parameters</h4>
|
||
<ul class="parameters"><li><code ng:non-bindable="">options {Object} </code>
|
||
<p>mediapicker dialog options object</p></li>
|
||
<li><code ng:non-bindable="">options.scope {$scope} </code>
|
||
<p>dialog scope</p></li>
|
||
<li><code ng:non-bindable="">options.callback {Function} </code>
|
||
<p>callback function</p></li>
|
||
<li><code ng:non-bindable="">editor {String} </code>
|
||
<p>editor to use to edit a given value and return on callback</p></li>
|
||
<li><code ng:non-bindable="">value {Object} </code>
|
||
<p>value sent to the property editor</p></li>
|
||
</ul>
|
||
<h4 id="Returns">Returns</h4>
|
||
<div class="returns"><code ng:non-bindable="">{Object}</code>
|
||
– <p>modal object</p></div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|