m-e-conroy / angular-dialog-service Goto Github PK

Hi!

On the fresh-out-of-the-oven 5.2.1 tag there are a few of console.log out when not using translate module.

LOG: 'Dialogs: (Angular-Translate): [$injector:nomod] Module 'pascalprecht.translate' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. http://errors.angularjs.org/1.2.25/$injector/nomod?p0=pascalprecht.translate'
LOG: 'Dialogs: Attempting to use translate.sub module.'
LOG: 'Dialogs: Creating default translations for use without Angular-Translate.'

Not creating a PR here because I'm not sure if this is intentional, temporary, or what not. Of course, it's something I can live with for a while, but quite a nuisance while running unit tests.

Cheers

Has anyone developed a pattern for mocking the dialog use?

They acre a little like promises, but are not, so I can't use a promise in a mock.

Here is my code snippet:

var dialog = this.dialogs.confirm(confirm, message);
dialog.result.then(

i want to mock this use .... Any examples would be most appreciated.

--mike

I have a modal dialog with a form in it. It handles ng-keypress for enter to submit the form. If the form doesn't validate, I use $dialogs.error() to display an error message and don't allow the modal to close.

Problem comes if they hit enter to close the $dialogs.error(). Since the focus is still on the dialog input control they hit enter in to create the error, I get another error message. If they click in the error dialog before hitting enter, then the enter key doesn't cause issues.

Somehow the error dialog needs to get the focus off the input control and onto the error dialog.

Attempting to have extended unicode in an error message ends up rendered as:

The character I was testing with is 👔 (NECKTIE), gotten from http://codepoints.net/U+1F454

Disclaimer: I'm still learning Angular, so I'm not sure if this is a bug with this dialog service or angular itself.

Hi,

i'm having problems using custom translations inside modal with html template and controller. The error is:

Unknown provider: tanslateFilterProvider <- tanslateFilter

Dialog service default translations like YES, NO, OK work as expected, but any custom like {{ 'ADD_PAGE' | tanslate }} are not and error is thrown.

I call dialog.create like this

$scope.newSubItem = function (
var dlg = dialogs.create('pages/create/pages-create.html', 'PagesCreateController', {data:data}, {size: 'lg', keyboard: true, backdrop: true});
dlg.result.then(function (page) {
$scope.children.push(page);
$scope.updateServer();
});
};

Please help!

The examples arent working and when ignoring that and trying to get bootstrap and angular errors

Need to change the ng-bind directives in the templates and add notes on having to include ngSanitize.

Angular is throwing this error twice, once for each carousel control on my page. It doesn't seem to actually be breaking anything, but I'd like to figure out what's going on. The full error message:

Error: [$compile:ctreq] Controller 'carousel', required by directive 'slide', can't be found!
http://errors.angularjs.org/1.2.26/$compile/ctreq?p0=carousel&p1=slide
    at http://ff.local/bower_components/angular/angular.js:78:12
    at getControllers (http://ff.local/bower_components/angular/angular.js:6543:19)
    at nodeLinkFn (http://ff.local/bower_components/angular/angular.js:6712:35)
    at delayedNodeLinkFn (http://ff.local/bower_components/angular/angular.js:6933:11)
    at compositeLinkFn (http://ff.local/bower_components/angular/angular.js:6105:13)
    at compositeLinkFn (http://ff.local/bower_components/angular/angular.js:6108:13)
    at publicLinkFn (http://ff.local/bower_components/angular/angular.js:6001:30)
    at boundTranscludeFn (http://ff.local/bower_components/angular/angular.js:6125:21)
    at controllersBoundTransclude (http://ff.local/bower_components/angular/angular.js:6732:18)
    at link (http://ff.local/bower_components/angular-bootstrap/ui-bootstrap-tpls.js:1904:9) <div ng-class="{
    'active': leaving || (active &amp;&amp; !entering),
    'prev': (next || active) &amp;&amp; direction=='prev',
    'next': (next || active) &amp;&amp; direction=='next',
    'right': direction=='prev',
    'left': direction=='next'
  }" class="left carousel-control item text-center ng-isolate-scope" ng-transclude="" href="#anon-home-dialog" role="button" data-slide="prev"> angular.js:10072(anonymous function)

Can anyone tell me what's going on? Thanks.

Hi,
Your work seems to be nice :)
Is it possible to make a Nuget package to install your lib (and its dependencies) easily ?
Thanks.

Currently when trying to install from bower (with version ~3.1.0), I get the following error:

bower angular-dialog-service#~3.1.0     ENORESTARGET No tag found that was able to satisfy ~3.1.0

There needs to be a tag with a name that relates directly to the version in bower.json (namely 3.1.0).

Hi,

Just tried your latest pull request with the I18n fixes and it's not working for me, I was using your up to date .min.js and instead of rendering the html content it just gets printed into the modal. Reverting to the previous commit fixed it for me.

I appreciate it is not in a release, I just had some issues and just thought I would bring it to your attention.

Hi!

If you call dialogs.wait("Header", "Message", 0) the dialog box's header will not be "Header" but "Please wait". I had a quick look at the code and I think the template is not correct, but I'm not quite sure. What do you think?

Thanks!
Michel

https://github.com/m-e-conroy/angular-dialog-service/blob/master/dialogs.js#L175

This deep copy disconnects any object references that may have been passed into the directive, making it impossible to change the passed-in data without jumping through hoops.

I propose removing the angular.copy and simply returning the data object as-is.

What started out as a question: Why can't I override the template in the options? turned into a pretty neat way of extending the dialogs service to make it even easier to use.

I was trying to modify the confirmation dialog to confirm a deletion, where I wanted the confirmation to stand out with different colors. Turns out I can do it via the window class, but it actually turned out that in the process of getting this to work, I managed to extend your excellent dialogs module without having to touch the code.

What I added was dialogs.confirmDeletion(header, msg, opts) which works like confirm, but provides default opts to help control the coloring.

To do this, I used the $provide.decorate to extend your dialogs module with the following code:

/* So, this addon to Michael Conroy's dialog service is here to make it easy to create a deletion
  confirmation dialog with the right styling.  It was inspired by this article
  http://blog.xebia.com/2014/08/08/extending-angularjs-services-with-the-decorate-method/
  and uses the windowClass to mark the confirmation dialog up with some additional text and colors
  that it otherwise would not have.  It relies on the following CSS being present.  It does this without
  changing the dialogs code itself.

.deletion-confirmation .modal-footer .btn-default {
    background-color: red;
    color: white;
}
.deletion-confirmation .modal-footer .btn-default:after {
    content: ", delete it";
}
.deletion-confirmation .dialog-header-confirm {
    background-color: red;
}
*/
angular.module('dialogsPlus', [])
  .config(function($provide) {
    $provide.decorator('dialogs', function($delegate) {
      $delegate.confirmDeletion = function(header, msg, opts) {
        var theOpts = {
          windowClass: 'deletion-confirmation'
        };
        if(opts) {
          angular.extend(opts, theOpts); // Allow the caller to override our default opts
        }
        return $delegate.confirm(header, msg, theOpts);
      };
      return $delegate;  // Now you also have the confirmDeletion method you can call from dialogs
    });
  });

Hey, maintainer(s) of m-e-conroy/angular-dialog-service!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library m-e-conroy/angular-dialog-service is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "m-e-conroy/angular-dialog-service",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Plus: why copy if you expect a String (inferred from comments)?

BR

there's an issue happening on Chrome when user multi select items on selection in a dialog by click and draging the items.
It's not a issue on IE and Firefox.
http://plnkr.co/edit/dIZg3445dBiHq2aFYwMQ

I pass a data object into the controller via $dialogs.create('template', 'xyzController', data, options). How can I access the data in xyzController?

The current error dialog controller code is laid out like this:

    /**
     * Error Dialog Controller 
     */
    .controller('errorDialogCtrl',['$scope','$modalInstance','$translate','header','msg',function($scope,$modalInstance,$translate,header,msg){
        //-- Variables -----//

        $scope.header = (angular.isDefined(header)) ? header : $translate.instant('DIALOGS_ERROR');
        $scope.msg = (angular.isDefined(msg)) ? msg : $translate.instant('DIALOGS_ERROR_MSG');

        //-- Methods -----//

        $scope.close = function(){
            $modalInstance.close();
            $scope.$destroy();
        }; // end close
    }]) // end ErrorDialogCtrl

And it is called like:

            return {
                /**
                 * Error Dialog
                 *
                 * @param   header  string
                 * @param   msg     string
                 * @param   opts    object
                 */
                error : function(header,msg,opts){
                    opts = _setOpts(opts);

                    return $modal.open({
                        templateUrl : '/dialogs/error.html',
                        controller : 'errorDialogCtrl',
                        backdrop: opts.bd,
                        keyboard: opts.kb,
                        windowClass: opts.wc,
                        size: opts.ws,
                        resolve : {
                            header : function() { return angular.copy(header); },
                            msg : function() { return angular.copy(msg); }
                        }
                    }); // end modal.open
                }, // end error

Because resolve 2 uses pieces (header and msg), it is very difficult to extend the error dialog to support an error dialog that uses a different template.

Lets say I have a list of errors that need to be displayed, that list needs html intermixed with it to make the error more readable. Or say that I'd rather the designer make it look pretty and I just need to get that information to them.

So I set about using decorate ( #59 ) to extend the error dialog and bump into the issue of not being able to specify the template. No problem, I'll just call $modal.open directly with a different templateUrl and essentially duplicate the error function in my decorator; at least I didn't have to write a new controller.... Oops, I can't do that because errorDialogCtrl takes 2 and only 2 params in its resolve, header and msg which it then puts thru the translate function, effectively closing the door on extension.

Since resolve is completely internalized within the dialogs, I'm suggesting a change to pass resolve like this:

resolve : {
    data: function( ) {
        return { 
             header : angular.copy(header),
             msg : angular.copy(msg);
        }
}

And implementing the errorDialogCtrl like this:

    .controller('errorDialogCtrl',['$scope','$modalInstance','$translate','data',function($scope,$modalInstance,$translate,data){
        //-- Variables -----//
        $scope.data = data;
        $scope.header = (angular.isDefined(data.header)) ? data.header : $translate.instant('DIALOGS_ERROR');
        $scope.msg = (angular.isDefined(data.msg)) ? data.msg : $translate.instant('DIALOGS_ERROR_MSG');

        //-- Methods -----//

        $scope.close = function(){
            $modalInstance.close();
            $scope.$destroy();
        }; // end close
    }]) // end ErrorDialogCtrl

This allows all the old code and templates to function as before, but allows anyone to use the errorDialogCtrl beyond it's current capabilities. data might be the wrong name to use, maybe errorObj or errorDetails makes more sense, and this has not yet dealt with the difficulty in overriding the template still, but template could be moved to the opts object easily enough and that would make the whole thing pretty easy to deal with using decorate.

I looked through the code and only see the that the confirm text comes from the translator result. Is there a good way to set the confirm button (OK) button text.

Examples of my confirm button text is 'Go to this action..',... 'Upgrade'

Please make bower package compatible with bootstrap 3.1.1 - everything works just fine but i Can not build it on my CI - can not install angular-dialog-service because of

ECONFLICT Unable to find suitable version for bootstrap

my angular version is 1.2.20 in bower_components/angular/bower.json.

In bower_components/angular-dialog-service/.bower.json:

the version is 4.0.0.0, dependencies are : angular 1.2.x, bootstrap 3.x.x, angular sanitize 1.2.x, angular-bootstrap 0.10.x and angular-translate 2.1.x.

when i do grunt server, everything compiles fine and the UI is visible on the browser perfectly, but i get the following error in the console 👍

Uncaught reference error : angular is not defined in angular-dialog-service.

I have checked the dependencies in bower_components and everything looks fine.

Can you please suggest some solution ?

Hello,

I've seen you don't support 'md' size for your dialog, but the bootstrap is supported.
Can you fix your if-cases, on codeline 153 and 230, there is missing 'md' size.

Thanks

Your minified version does not match your current build of the dialogs. The added static functionality doesn't work due to this

It would be great if you could support font-awesome instead of glyphicons so that projects that use font-awesome wont need to download two fonts

I'm working on a project in which I want to use your dialog service. But a few problems occured.

• The message is not displayed
• The text for the buttons can not be changed as far as I know.

Could you possibly look into this? If you need more details, i'll be more than happy to inform you

309    create : function(url,ctrlr,data,opts) {
310        var copy = (angular.isDefined(opts) && angular.isDefined(opts.copy)) ? opts.copy : _copy;
311        opts = _setOpts(opts);

Error is thrown in line 310
angular.isDefined(null) is true, so the error is thrown when opts.copy is evaluated

When did you start supporting angular 1.3.* ?

Bests
ndevr

Hi,

I really like what you did. Great job !

I was wandering if i can have this:

                                var dlg = dialogs.confirm("Please confirm", "warning. Leave without saving?");
                dlg.result.then(function(btn){
                    $scope.allowNavigate = true;
                    return true;
                },function(btn){
                    event.preventDefault();
                });

Just doesn't stop the navigation.

for me this works
if (confirm("warning. Leave without saving?"))
{
$scope.allowNavigate = true;
return true;
}
else
{
event.preventDefault();
}

When I try to call close() method or broadcasting event 'dialogs.wait.complete' just after opening a dialog with dialogs.wait(), the dialog doesn't close and an exception is raised. A workaround is to defer the call to close() method but I am not found of this : /

You can find a plnkr here :
http://plnkr.co/edit/jK1Dnj1jWPaUkdY173Bc?p=preview

Thank you : )

I found that I needed to add
.modal {overflow: visible} to have the content of the dialog box displayed

Hello! I am trying to use the datepicker from within the custom dialog, and I can see that everything is hooked up right on the datepicker's side. When I click on the calendar popup, I can see that it enters the is-open function of the datepicker, but the value is never changed. Can I use other directives from within the custom dialog?

Here is an example:

app.directive('ccAddUser', [ function(){
function link(scope, element, attr){
var dialogProvider = element.injector().get('dialogs');
var modalData = {
header: 'Add New User'
}
element.bind('click', function(event){
var dlg = dialogProvider.create('/settings/modal-add-new-user.html','settings.UserCtrl', modalData);
dlg.result.then(function(){
if(scope.ccPostSubmitAction){
scope.$eval(scope.ccPostSubmitAction);
}
},function(){
if(scope.postCancelAction){
scope.$eval(scope.ccPostCancelAction);
}
});
})
}
return {
link: link,
scope: {
ccPostSubmitAction: '&',
ccPostCancelAction: '&'

    }
}

}])

$scope.dtDateRegistered = undefined;
$scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();
    console.log('this prints out just fine');
    $scope.registeredOpened = true;
};


$scope.dateOptions = {
    'year-format': "'yyyy'",
    'starting-day': 1
};

$scope.formats = ['dd-MMMM-yyyy', 'MM/dd/yyyy', 'MM/dd'];
$scope.format = $scope.formats[1];

I noticed that the header isn't customizable for error() and wait(). It would be nice if that could be added.

I'd be happy to add it myself, but I wasn't sure if you would prefer a consistent API (error(header,message)) or if you would like to preserve existing calls (error(message,header)).

Hello. Feel free to close this issue if this is intended behavior. If so, some guidance in the docs would be useful here.

I used bower install angular-dialog-service:

angular-dialog-service#5.1.1 app/bower_components/angular-dialog-service
├── angular#1.3.0-beta.17
├── angular-bootstrap#0.11.0
├── angular-sanitize#1.3.0-beta.17
├── angular-translate#2.1.0
└── bootstrap#3.1.1

But when I attempt to invoke dialogs.error() (or any of the other commands) the translations are not taking effect.

By running the debugger, I discovered that dialog.default-translations is not being invoked. I don't see that module listed as a dependency in dialogs.js. Is it my job to include that dependency? That seems odd as I don't see that in any of the active examples or docs, and also because I don't even need to include the translations lib (pascalprecht.translate) as that is included by dialogs.js.

Here's my repro in case that matters, which I don't think it does.

angular.module('app', [
   "ngCookies", "ngResource", "ngSanitize", "ui.bootstrap", "dialogs.main", "ui.router"
    // uncommenting this next line fixes the error
   // "dialogs.default-translations"
])
    .controller('testDialogs', function($scope, $rootScope, $timeout, dialogs) {
      $scope.launch = function() {
        dialogs.error();
      }
    })

Hope that helps!

Cheers,

When used with Yeoman grunt-bower-install adds both unminified and minified to index.html during build phase.

bower spec discourage added minified files to bower.json according to bower.json specification

Please remove minified from main section in bower.json

Hi,

According to: https://github.com/angular-ui/bootstrap the correct dependency to include is angular-bootstrap. angular-ui-bootstrap doesn't declare a main property in its bower.json, which is a problem if you are using bower-files in gulp.

If you are generating a custom angular-ui bootstrap build, you should include angular-ui-bootstrap as dev-dependecy.

Thanks!

I am trying to get things working I have created the following Plunker

http://plnkr.co/edit/p8TT2UNLwY04z1lg0vGw?p=preview

This seems to fail on the loading of the 'dialogs.main' within the controller. Is there a JS dependency I am missing or something.

The bower.json for the 5.1.0 requires bootstrap to be installed. Using a build tool like yeoman forces both scripts into the dependency list.

This wreaks havoc on a lot of the dropdown/groups in bootstrap since angular-bootstrap and bootstrap begin competing over whether it is opened or shut.

I presume this dependency is so that the lib will work with either angular-ui-bootstrap or vanilla bootstrap? Any ideas for working around this?

I'd love to use this off of cdnjs.
https://github.com/cdnjs/cdnjs

Do you already deliver to npm? cdnjs has a setting to automatically pull from npm every 4 hours, so after an initial setup, hopefully you can just forget about it. :) Thanks for a great plugin!!

(from cdnjs) Enabling NPM auto update

We automatically update libraries that are also hosted on NPM e.g. Lodash.

This script runs automatically every 4 hours

Update the package.json and configure it as below and submit a pull request.
// Lodash package.json
// ...
"npmName": "lodash",
"npmFileMap": [{
"basePath": "/dist/",
"files": [
"*"
]
}],
// ...
npmName should map to the name of the library on NPM npmFileMap is a white list of files to take from the NPM tarball and host on the cdn basePath will be ignored when copying over to the cdn files is a pattern matcher that you can select many files with

The above example looks in the tarball whose structure might look like

dist/lodash.js
dist/lodash.min.js
README It then will look for dist/* which will find the two files inside the dist folder. It will now copy it over to cdnjs but without the dist path. Such that they will end up. ajax/libs/lodash.js/2.0/lodash.js

I use Bootstrap v2.x, Angular 1.2.x and Angular-UI Bootstarp 0.8.0 in my project. How do I install v2.0 with bower?

Hello,

first thank you for your work. There is an issue with the bootstrap3 branch of angular-ui. The template of the modal window has changed and now the transclude is done on an inner div and not the root div.

    "<div class=\"modal fade {{ windowClass }}\" ng-class=\"{in: animate}\" ng-style=\"{'z-index': 1050 + index*10}\" ng-transclude></div>");

vs

"<div class=\"modal fade {{ windowClass }}\" ng-class=\"{in: animate}\" ng-style=\"{'z-index': 1050 + index*10, display: 'block'}\" ng-click=\"close($event)\">\n" +
    "    <div class=\"modal-dialog\"><div class=\"modal-content\" ng-transclude></div></div>\n" +
    "</div>");

We need to keep only the modal-content part of the template

Hello,

I try to use selectize.js on a modal dialog but it does'nt work ..

On the dialog html

 <select id="select-beast" placeholder="Choose something"  >

                                    <option value="1">option 1</option>
                                    <option value="2">option 2</option>
                                </select>

On the dialog's controller , i got this

  var init = function() {
    $('#select-beast').selectize({
      create : true,
      sortField : 'text'
    });
  };

  $scope.$on('$viewContentLoaded', function(){
    init();
});

when i use this code on a normal view, it's working, i got a selectize combobox, not on the modal dialog.

how to call something when dom is ready on a modal dialog ?

when click "Custom" Wait Dialog" button or "Wait Dialog" button, I get error as:

Error: [$injector:unpr] Unknown provider: dataProvider <- data
http://errors.angularjs.org/1.2.16/$injector/unpr?p0=dataProvider%20%3C-%20data
at https://code.angularjs.org/1.2.16/angular.js:78:12
at https://code.angularjs.org/1.2.16/angular.js:3705:19
at Object.getService as get
at https://code.angularjs.org/1.2.16/angular.js:3710:45
at getService (https://code.angularjs.org/1.2.16/angular.js:3832:39)
at invoke (https://code.angularjs.org/1.2.16/angular.js:3859:13)
at Object.instantiate (https://code.angularjs.org/1.2.16/angular.js:3880:23)
at https://code.angularjs.org/1.2.16/angular.js:7134:28
at resolveSuccess (http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js:2112:32)
at wrappedCallback (https://code.angularjs.org/1.2.16/angular.js:11319:81)

I am receiving the following error when trying to show a dialog using angular 1.3 and dialog service.

[$interpolate:interr] Can't interpolate: {{"DIALOGS_YES" | translate}}
TypeError: Unable to get property '$id' of undefined or null reference
http://errors.angularjs.org/1.3.0-beta.6/$interpolate/interr?p0=%7B%7B%22DIALOGS_YES%22%20%7C%20translate%7D%7D&p1=TypeError%3A%20Unable%20to%20get%20property%20'%24id'%20of%20undefined%20or%20null%20reference

Fix the options on the custom dialog service the create service doesn't seem to work without supplying them, make them more "optional"

With the new 4.2 changes, it doesn't appear to be possible to set a specific width or unique class for each dialog I create (custom dialog). Is it possible to add this as a feature?

They don't use/include the bootstrap js files, its all pure angular. When I use the error dialog which was working with the previous bootstrap version, it all looked fine.

http://angular-ui.github.io/bootstrap/

Now my error dialogs look like

Notice there is no titlebar......

Hi, I think translations should be made optionals... My app is single lang, and I'll have to add all the i18n bloat just to get this to work....

If you need me to fork, and code-out all the internationalization just call for it.

Cheers

dataProvider not found error appears when i try to create a new predefined dialog within a custom dialog controller. Steps to reproduce:

1. create a custom dialog

dialogs.create('template','controller',{},{})

2.within its controller call one of a predefined dialogs

dialogs.wait()

= You should see an error in the console saying unknown dataProvider

WORKAROUND
There is a workaround to not use predefined wait function. You can just call:

dialogs.create('/dialogs/wait.html', 'waitDialogCtrl', {header: '', msg: ''})

Version 5.0, with bootstrap 3.2, the gray background appears, but the modal dialogs are not visible. There appears to a Z-ordering issue?