cgross / angular-prompt

Angular service to easily display input prompts and confirmation modals.

angular-prompt

Angular service to easily display prompt and confirmation modals.

This library depends on angular-ui-bootstrap.

Demo

Live Demo

Getting Started

Install with Bower or download the the files directly from the dist folder in the repo.

bower install angular-prompt --save

Add dist/angular-prompt.js to your index.html.

Add cgPrompt as a module dependency for your module.

angular.module('your_app', ['ui.bootstrap','cgPrompt']);

Now you can inject and use the prompt service.

function MyCtrl($scope, prompt) {

  //simple confirmation
  prompt({
    title: 'Delete this Thing?',
    message: 'Are you sure you want to do that?'
  }).then(function(){
    //he hit ok and not cancel
  });

  //ask the user for a string
  prompt({
    title: 'Give me a name',
    message: 'What would you like to name it?',
    input: true,
    label: 'Name',
    value: 'Current name',
    values: ['other','possible','names']
  }).then(function(name){
    //the promise is resolved with the user input
  });  
}

API

prompt(options);

• options.title

Type: String
Default: '' The title for the dialog.

• options.message

Type: String
Default: ''
The message inside the dialog.

• options.input

Type: Boolean
Default: false
Set to true if you wish to prompt the user for a text value.

• options.label

Type: String
Default: ''
The label for the input if input=true.

• options.value

Type: String
Default: ''
The initial value of the input if input=true.

• options.values

Type: Array of String
Default: undefined
A list of values available in a dropdown for the user to select as the input value.

• options.buttons

Type: Array of Object with properties label,cancel, style, and primary
Default: [{ label:'OK', primary: true }, { label:'Cancel', cancel: true }]
A list of the buttons to display on the dialog.

The function returns a promise. That promise is resolved with either the button that was pressed, or in the case of input prompts, the value the user entered. If the user pressed a button where cancel=true or canceled the dialog another way (hit ESC, etc) then the promise is rejected.

Release History

• v1.2.0
  • Moved to Angular 1.5 and UI Bootstrap 1.3.
  • Refactored code to no longer use angular.element(...).scope().
• v1.1.0
  • Added style option to buttons.
• v1.0.1
  • Updated modal template with correct modal title class.
  • Added bower_components to ignore in bower.json.
  • Moved to angular-bootstrap v0.11.
• v1.0.0 - Initial release.

angular-prompt's Issues

'x' in modal close renders as strange capital A and hyphen

replace x with × here

angular-prompt/dist/angular-prompt.js

Line 109 in 6de8bdf

" <button type=\"button\" class=\"close pull-right\" ng-click=\"$dismiss()\" aria-hidden=\"true\">×</button>\n" +

Note: this is what bootstrap does http://getbootstrap.com/javascript/#static-example

I can submit a pull request for the small change.

Feature request: Allow HTML passthrough in message

I don't think that's possible right now. But would be nice.

placeholder for input

need options.inputPlaceholder

Hard coded start & end symbols can cause rendering issues

I use different start and end symbols in my angular app:

config(function($interpolateProvider){
    $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
})

Unfortunately, that isn't honored by angular-prompt. It would be helpful to have the start and end symbols dynamically set.

Service is the same name as a native JavaScript function

If the service isn't injected into a controller and prompt() is invoked then it will invoke the native prompt function. Linters won't complain because it will be recognized as a native function.

A Suggestion

Nice library, great work.

I only have a small suggestion, maybe we can add an image icon? that would be nice.
Second i noticed the modal dialog is not centering in the screen, can we fix that?

We need to assign classes to the prompts messages

We have different kind of prompt messages with different styles, we have to unify the styles however we've seen that we're not allow to apply classes to the prompt messages.

[Request] More Input Types

In addition to just text values, I might want to get some other form of input.

The easiest thing you might do is change the 'input' option to 'inputType' or something and inject that into a <input type="{{inputType}}"> or something.

Dropdown values do not show up

I have a drop down and I want to use the values option. I tried giving passing an array to "values" in the options object. It show's the values but when the user selects one and presses "OK" the promise is not returning the selected. Everything works for a simple text box.

                self.prompt({

                    "title": "Cloning Search",

                    "message": "",

                    "label": "Enter Business Owner Name",

                    "dropDown":true,

                    "values":self.businessOwnerLst

                }).then(function(newName) {

                //When I console this 'newName' it gives me the following object
               // { 
              //    label: "OK",
               //   primary: true,
              //    __proto__: Object
              //  }


                });

How do you get HTML in options.message?

https://github.com/cgross/angular-prompt/blob/master/angular-prompt.html#L8

This may be a really dumb question, but how do I get newlines, <strong>.<small> reflected in the message?

Any tips?

Max length on input needed.

Something like:

prompt({
title: '',
message: '',
input: true,
maxInputLength: 255
})

Which is bound to <input maxlength="{{maxInputLength}}">

Type password needed

For example, if you want to ask user's password before change account settings. I think it's common thing.

Thank you, for your project!

Will this run on Angular 1.4.x?

Installing with bower wants to install Angular 1.5, but I cannot update my product to use it for a variety of unrelated reasons.

Can I (and how do I) use this with Angular 1.4.x?

Line Break

How to insert a line break for multi line message ?

Problem for new version of angular-ui-bootstrap

I got the following error message:

Error: [$injector:unpr] Unknown provider: $modalProvider <- $modal <- prompt
http://errors.angularjs.org/1.4.9/$injector/unpr?p0=%24modalProvider%20%3C-%20%24modal%20%3C-%20prompt

When I upgrade my angular-bootstrap to 1.1.2. Any suggestion? Thanks

Stupid question - Submitting pull request?

Hi sorry for the stupid question,

would like to submit a pull request. How can I set everything up locally and compile a new version?

Are there any tests I have to run?

Thanks! Great work!

scope() returning undefined when debugInfoEnabled(false)

According to angular documentation disabling debug info in production gives a significant performance boost

https://docs.angularjs.org/guide/production

Unfortunately this causes scope() to return undefined and the angular-prompt not to work anymore.
Line 68 of angular-prompt.js