jameskleeh / angular-confirm Goto Github PK

First, let me thank you for writing a good directive/service that is simple to use---solves 95% of my need for dialog boxes.

However, I have one use-case where I have this in my controller

$scope.name="Anne";
$scope.showTemplatedService = function()
{
    var data1 = {list: ["Anne","Betty","Cathy"] };
    $confirm( data1, {templateUrl: 'dialog.html'})
        .then(function() {
            alert("You selected "+ $scope.name  );
        });
}

and in a html file

...
<script type="text/ng-template" id="dialog.html">
...
    <select ng-model="name">
            <option ng-repeat="item in data.list" value="{{item}}">{{item}}</option>
    </select>
    <div id="selected"> {{name}} </div>
</script>

I can see the selection I make in the div in the dialog box after I make a selection, but how do I get that value in the promise in the controller?

Thanks in advance.

I get this when including and using angular-confirm - http://imgur.com/IDyUO0O

I'm sure this is because of some existing CSS but i'm not good enough at CSS to debug it. Are there any easy methods you're aware of that I can use to get this working without tiring CSS debugging?

Hello.

Angular UI (version: 0.14.3) have changed the naming convention of their services. They prefix them with 'uib' now.

Could you please make this change on your library as well so we stop getting the deprecation warning whenever we use it?

Thanks in advance.

Hello!

So I have found a small issue in your library.
I build my application using normal sources and minify/uglyfy it all together with my app.

After minification I encountered error described here:
https://docs.angularjs.org/error/$injector/unpr?p0=eProvider%20%3C-%20e%20%3C-%20$confirm%20%3C-

A quick googling gave me this hint: http://stackoverflow.com/questions/13459452/rails-3-angularjs-minification-does-not-work-in-production-unknown-provider

And so I have found in your code the missing parts:

.controller('ConfirmModalController', function ($scope, $uibModalInstance, data) {
(...)
.factory('$confirm', function ($uibModal, $confirmModalDefaults) {
(...)
.directive('confirm', function ($confirm, $timeout) {

they should look like this:

.controller('ConfirmModalController', ['$scope', '$uibModalInstance', 'data', function ($scope, $uibModalInstance, data) {
(...)
.factory('$confirm', ['$uibModal', '$confirmModalDefaults', function ($uibModal, $confirmModalDefaults) {
(...)
.directive('confirm', ['$confirm', '$timeout', function ($confirm, $timeout) {

But later I noticed you are using ngAnnotate = require('gulp-ng-annotate'), in your build script.

However if you want it to work properly you need to follow this guidelines:
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#minification-and-annotation

I can fix it and present a pull-request if you prefer.

Would like an option to pass data to Angular-Confirm without copying it. This would allow the ability to have inputs on the confirmation modal that can update the calling parent scope.

Setup two confirm enabled buttons (One requires a typed 'signature', the other does not). Use a custom templateURL for the first. Allow the default for the second.
Click the second button. The proper dialog (default) appears. Click the first button, the proper dialog appears (custom). Click the second button again, the wrong dialog (custom) appears.

The code is not minification safe and it breaks using ng-strict-di.

Hi, James. You developed this wonderful module, thank you so much, dude. But we are confused by some strange things:

1. there's a line in package.json:

"main": "angular-confirm.min.js"

2. but! in .gitignore you specified same file - angular-confirm.min.js

By installing this module via npm we have a problem: module does not contain angular-confirm.min.js because of .npmignore which totaly matches with .gitignore. Could you please update the package in npm providing an appropriate .npmignore (which wouldn't contain angular-confirm.min.js).

We've got this error because of missing angular-confirm.min.js:

Module not found: Error: Cannot resolve module 'angular-confirm'

Firstly, thanks for the module. Works great.

I just noticed that when I use Angular Bootstrap Tooltip on the same element, the confirm doesn't work anymore. For example this works fine:

<img src="img/trash.png" ng-click="delete()" confirm="Are you sure to delete?" confirm-settings="{size: 'sm'}" />

but when I add the tooltip the dialog doesn't pop up:

<img src="img/trash.png" ng-click="delete()" uib-tooltip="Delete list" confirm="Are you sure to delete?" confirm-settings="{size: 'sm'}" />

Thanks,
Volkan

Hi!

I did all steps like yours site, but when the $confirm is invoke throw a exception with message "undefined is not a function".

I dont know why $confirm doesnt work.

Thanks

I look in the closed issues but don't found a help.

I made an interface with a list of button. on each button there is a confirm with yes/no.
http://awesomescreenshot.com/0465v52t3e

there is a lot of button so if the user needs to click 10 of them, the confirm message will be boring after 2/3 times.
Is there a way to display inside the confirm modal a button to "ok i understand, stop showing confirm" so on other button click confirm will not show.

It is on same idea that how modern web browser handle popup .

thanks

currently i am using directive like : confirm="Are you sure?"

But what if i want to confirm if certain condition is true.

Can you please help.

Hi,

I'm trying to deploy version 1.2.1 to http://www.webjars.org/bower.
I'm getting the following error:

Failed! No valid licenses found. Detected licenses: Apache The acceptable licenses on BinTray are at: https://bintray.com/docs/api/#_footnote_1 License detection first uses the package metadata (e.g. package.json or bower.json) and falls back to looking for a LICENSE, LICENSE.txt, or LICENSE.md file in the master branch of the GitHub repo. Since these methods failed to detect a valid license you will need to work with the upstream project to add discoverable license metadata to a release or to the GitHub repo. If you feel you have reached this failure in error, please file an issue: https://github.com/webjars/webjars/issues Created Bower WebJar Fetched Bower zip Generated POM Converted dependencies to Maven Got Bower info Determined Artifact Name: github-com-Schlogen-angular-confirm Starting Deploy
Deploy!

The code as it sits ends up deleting a template ( because it's trying to use templateUrl )

This is because the check which is supposed to confirm existence of templateUrl is code in correctly. Specifically line 63 checkout for 'templateUrl' in settings which returns true even if the field has a value of undefined. A more appropriate check would be just settings.templateUrl which will return false in the case of undefined

Since the module requirement is the whole of ui-bootstrap, this creates conflicts if you're also using Angular Strap. Could the ui-bootstrap dependency reduced to only those modules needed for the modal?

Hello,

I'm trying to unit test a delete method that prior to deleting the entity uses $confirm to query the user if he really wants to delete the entity.

Any ideas on how to mock the $confirm?

Cheers

For example in template could be some input-textarea.

Is there any possibility to get this data in $confirm after clicking on the ok button?

Hello,
Thanks for this wonderful plugin. I am having issues using the plugin. Anytime i included the 'angular-confrim' module in my App.module, i get the error below

Error: [$injector:unpr] Unknown provider: $modalProvider <- $modal <- $confirm
Here's my App module config
var App= angular.module('escrow',['datatables','datatables.bootstrap','ngRoute','datatables.buttons','angular-confirm','ui.bootstrap'])

And here is my controller
App.controller('BankMerchantListCtrl',function($scope, $compile, $confirm, $uibModal, DTOptionsBuilder, DTColumnBuilder,BankService) {

Whenever a modal confirmation dialog is shown, the elements in the page move a little to the right. After it's closed, they move back left.

I thought it was an issue with my CSS, but I noticed it happens in angular-confirm's example page. Just click on the "Delete (Click 'Reset to clear')" button to see it.

http://schlogen.github.io/angular-confirm/

This should have similar functionality to confirm() in JS

A Boolean, indicating whether "OK" or "Cancel" was clicked in the dialog box:
true - the user clicked "OK"
false - the user clicked "Cancel" (or the "x" (close) button in the top right corner that is available in all major browsers, except Firefox)

Example:

if (document.getElementById("back-button").disabled ||
$confirm({title:'',text: "The 'Back' button will be disabled if a field " +
"name is changed. Press 'OK' to confirm.", ok: 'OK', cancel: 'Cancel'}) == true)

I have read your documentation and do not see an example like this.

Event propagation can not be stopped.
If $event.stopPropagation() is called in ng-click expression, it is not called right on click but upon dialog is closed and at that point event is already propagated.

Current workaround:
wrap your element with element which has ng-click="$event.stopPropagation()".

add an attribute to inform the modal title.

can't find directive attribute to specify size of modal (eg : confirm-size="samll")

Could we please get a minified version of the file included in the package?

I am in trouble with use templateUrl which includes angular validation(the original),and i want to pass Form.$valid to the confirm dialogo function ok but it didn't work in the controller with then(function(isValid){console.log(isValid)})....or is there any way to link submit action to this ok function ...
much appreciations if you can deal with it cause i am a new one in angular js....

Name of git repo would lead one to believe that bower install angular-confirm would work. This is wrong repo / library however.

bower install angular-confirm-modal works.

Hello,

Do you have a fully sample with a custom template file ?

I don't understand where to insert the $uibModal service.

My project uses '[[' instead of '{{' as interpolation symbol
Is it possible to change the symbols via configurations

I think the npm package is missing the min file.

Actually if the user click outside the $confirm modal it does the same thing as clicking cancel.
Is there a way to force the user to click only on "ok" or "no" button and make click outside the modal do nothing ?

$modal get an option to do this backdrop: 'static' but i don't know how to use it here ( i use $confirm as service in controller )

backdrop - controls presence of a backdrop. Allowed values: true (default), false (no backdrop), 'static' - backdrop is present but modal window is not closed when clicking outside of the modal window.

For example:

$modal.open({ templateUrl: 'myModalContent.html', controller: ModalInstanceCtrl, backdrop: 'static' })

How to confirm service only show one button 'OK' or 'Cancel'

I can't open demo today. It shows 404 error.

pls help.

Do you have any examples of using this from within another modal? I'm still new to angular, so I may be missing something quite simple, but I'm getting an injection error after following your example.

I have a view that itself will open a modal to allow for data entry. It's a pretty standard setup... form fields, and clicking okay will save the information. Cancel will cancel everything.

There's set of fields that dynamically repeat and they each have a button that will delete a set, if needed. In that function, I'm using the service method of calling your plugin.

I've included the reference in my controller like your example says.

codeCampApp.controller("AddSpeakerModalController", ["$scope", "$rootScope", "$modalInstance", "$confirm", "codeCampServiceFactory", function ($scope, $rootScope, $modalInstance, $confirm, codeCampServiceFactory) {

And then I included the confirm within the OK click function.

$scope.RemoveSession = function (session) {

    if (session.SessionId > 0 || (session.Title.length > 0 || session.Description.length > 0)) {
        $confirm({ text: 'Are you sure you want to delete this session?' })
            .then(function () {
                if (session.SessionId > 0) {
                    // call a web service to delete the session server-side
                }

            return;
        });
    }

    var index = $scope.sessions.indexOf(session);
    $scope.sessions.splice(index, 1);
}

But I get this error when I click on the button to open the original (my) modal:

Error: [$injector:unpr] Unknown provider: $confirmProvider <- $confirm <- AddSpeakerModalController

Can you help me?

The bowser throw an error:"Error: [$injector:unpr] http://errors.angularjs.org/1.4.6/$injector/unpr?p0=onfirmProvider%20%3C-%20%24confirm"

Hello people,

when I test the plugin , I came across the following error:

Unknown provider: $animateCssProvider <- $animateCss <- $uibModalStack <- $uibModal <- $confirm <- confirmDirective

Angular-confirm version: 1.2.3
ui.bootstrap version: 1.2.4

angular.module('app', ['ui.router', 'satellizer', 'angular-confirm', 'ui.bootstrap', 'ui.mask'])

I'm using $confirm inside angular-ui's uibModalInstance and it's updating with the class of already opened modal. I'm using custom css class modal-wide in parent div of modal-dialog in first modal.

Before $confirm modal

After $confirm modal open ( first modal's width back to medium as $confirm modal removed the modal-wide class )

For example: i have an input in confirm. How can i get data.inputText in second function after .then() (error processing)

We sometimes use confirm dialogs in more of a "negative" context, where dismissing the dialog warrants a 'danger' class for the button.

I have created the ability to pass in the desired bootstrap button class to the directive for each of the OK and Cancel buttons.

I have pull requested this, but let me know if this isnt the process that you prefer, or if you want to ignore it entirely.

Thanks!

Using Angular 1, Typescript, Jade, installed via bower

Error: [$injector:strictdi] function($confirm, $timeout) is not using explicit annotation and cannot be invoked in strict mode
http://errors.angularjs.org/1.4.7/$injector/strictdi?p0=function(%24confirm%2C%20%24timeout)
at processor.js:61
at Function.annotate as $$annotate
at Object.invoke (processor.js:61)
at processor.js:61
at forEach (processor.js:61)
at Object. (processor.js:61)
at Object.invoke (processor.js:61)
at Object.enforcedReturnValue as $get
at Object.invoke (processor.js:61)
at processor.js:61

Consider adding the prefix "$uib" to make it compatible with new bootstrapUi

Hello there,

when I include the angular-confirm.min.js file in my index.html and then inject it into my main.js file, then I get the following warning shown in my console:

WARNING: Tried to load angular more than once.

Any Idea, why this warning is thrown?

Regards

I need call a scope function when the dismiss modal is called.
Eg: When i click 'delete' action, a 'highlight' class is added to the row clicked then $confirm service is called, but when i dismiss the modal, i want remove this class.

Some ideia, to resolve this?

  $scope.selectedRow = null; 
    $scope.delete = function (item) {
        $scope.selectedRow = item.id;  //need set this to null when modal dismiss

        $confirm('Deseja realmente excluir este registro?')
            .then(function() {
                resource.delete(item.id).then(function (r) {
                  var index = $scope.items.indexOf(item);
                    $scope.items.splice(index, 1);
                });
            });
    }

To show the named templates feature

It's possible to define default settings with the following

.run(function($confirmModalDefaults) {
$confirmModalDefaults.templateUrl = 'path/to/your/template';
$confirmModalDefaults.defaultLabels.title = 'Modal Title';
$confirmModalDefaults.defaultLabels.ok = 'Yes';
$confirmModalDefaults.defaultLabels.cancel = 'No';
})

How to handle internationalization ( $confirmModalDefaults.defaultLabels.ok = 'Oui' for french for instance)

Hey,

I was trying to make the message look like "Are you sure to delete Bob?". However the message there doesn't seem to be a HTML support in angular-confirm.

I love this little Angular plugin and would appreciate if there is a way to put in some HTML into the message.

Thanks,
Raghu

Hi All,

I whipped up some quick TypeScript definitions, in case anyone here is into that sort of thing: https://gist.github.com/clonardo/c8e951818a98a8a6bbc3c9cfdb8682d5

I'll probably tweak them a bit before submitting a PR to DefinitelyTyped, but they're working well enough for me right now. Usage of the service looks something like this: https://gist.github.com/clonardo/9b853eab65699951a43471f673911d04

Hope this helps.

I am trying to use angular-confirm with requirjs but when I clikc the button nothing happens. IF I use it without Requirejs it work