vesparny/angular-fancy-modal

angular-fancy-modal - the definitive modal/popup/dialog solution for AngularJS.

angular-fancy-modal's Issues

bower.json "main" section references missing css file

The bower.json "main" section references dist/angular-fancy-modal-theme-default.css. My preference would be to remove the reference from the bower.json file completely rather than have it point to a default css theme file. My grunt bulid process auto-imports the bower.json main files into my SPA and I'd prefer the theme css not be included as the default behavior and rather that I explicitly import a theme css file if I need/want one.

suggestion: promise when closed

I see that there is a promise returned when the dialog is opened ..

opened {Promise}
A promise which will resolve when the modal is fully loaded.

would it be possible to add a promise when the dialog is closed ? Like ng-modal does in ng-material

$mdDialog.show({
      controller: DialogController,
      templateUrl: 'dialog1.tmpl.html',
      parent: angular.element(document.body),
      targetEvent: ev,
    })
    .then(function(answer) {
      // ok button pressed
    }, function() {
      cancel button pressed
    });

as you can see, this makes coding very simple ;)

Close modal when a modal is opened from that modal

Can't seem to figure out the best way to close a modal when you're opening a modal from that modal. So basically I want to be able to close whatever modal I'm viewing when I trigger another modal from that modal. Does that make sense?

on close function

I might be missing something basic, but is there a way to pass a function to open to be called when the dialog is closed non-programmatically (esc or overlay click)? Or do I have to rely on the event broadcast? I'm using a controller and it seems its remaining in scope somehow after the dialog is dismissed. Maybe that's the bigger issue - is the controller scope being destroyed?

creating confirm example

Focus not blocked

If you tab from components on the dialog you can tab into the components on the overlaid page and can then alter the value of these.

Will look for a solution to fix this and put in details of this. I suspect that I will need set all underlying fields to have a tabindex of -1 and then restore it on completion.

creating directive

Error when setting angularjs "$compileProvider.debugInfoEnabled(false);"

I changed that parameter in my angular application, and when I close the modal, this error is showing on browser console:

Any idea what could be the reason or solution for this?
Thank you!

Closing modal results in overlay not dissapearing and error

I'm using angular-1.2.28 and testing in Chrome 42.0.2311.152 m

When I close a modal, either through clicking on the overlay, the X button, pressing escape, or $scope.$modal.close(), the modal dissapears, the overlay dissapears, then the overlay returns and prevents any clicking on the page beneath it. In Chrome's developer console I also get the error:

Uncaught TypeError: Cannot read property '$destroy' of undefined

This references line 96 of angular-fancy-modal.js
It also affects the minified version.

The line in question is:
$modal.scope.$destroy();

If I comment that line out it seems to work fine, though I feel like it's probably causing a small memory-leak.

The only parameters I pass to $fancyModal.open() are 'templateUrl', 'controller', and occasionally 'resolve'.

Error: Syntax error, unrecognized expression

I am get error if cache template at page.

<script type="text/ng-template" id="/ng/main/dialog">
<div class="window" style="width: 400px">
    <div class="window_header">
        <h3 class="h window_h __h_m" ng-cloak="">{{header}}</h3>
        <a href="" class="window_close ic-set_12"></a>
    </div>
    <div>
        <div class="loader">Loading...</div>
    </div>
</div>
</script>

Problem: http://stackoverflow.com/a/14349083/2893450
Fix: need trim html from cache. (htmlTemplate = template.trim();)

Modal width

Hi,

I have used openingClass to specify a smaller width for the modal. That works. However while modal is closing, it is animated. This fade out/disappear still starts with the default width of 100%.

I tried using the css class for openingClass and closingClass. This causes the modal not to close at all.

Any ideas?

Thank you!

memory leak ? Multiple dialogs exist on close

so, I have this code opening the fancy modal :

$rootScope.$on('$fancyModal.closed', function (e, id) {
    console.log(id,"closed")
});

 $fancyModal.open({
     templateUrl: '/myUrl',
     controller: 'myController  as controller'
 });

myController is just an empty controller (no code, was trying to solve this problem - but if I've got no code left, there's not much more I can do on that :) )

the screen pops up as expected. However, the closed event gets called multiple times:

In this case, I have opened the modal 5 times. As you can see, the first time I get fancy-modal-1 closed, the second time I open it, I get 2 fancy-modal-2 messages, etc etc

scope with controllerAs

if both of my controllers (parent and modal) are using controllerAs syntax , as in

main controller:

    angular.module('myApp').controller('mainCtrl', mainCtrl)
    mainCtrl.$inject = ['$stateParams','$state''$fancyModal']

    function mainCtrl($stateParams,$state$fancyModal) {
       var controller = this;

       [snip]
       controller.data = {foo: "bar"}

       $fancyModal.open({
                templateUrl: '/myTemplate',
                controller: 'modalCtrl as controller'
            });
    })

modal controller:

angular.module('myApp')
    .controller('modalCtrl', modalCtrl)

function modalCtrl() {
    var controller = this;

   // how do I get data from mainCtrl in here ?
}

how can I pass data from mainCtrl into the modalCtrl ? $scope is not used at all .. can I pass a data object in ? What's the best practice in this instance ?

Many thanks

Usage with ngRepeat

Lets say I want to display a block of content from ngRepeat in the modal. How do I do this? Thanks!

publish to npm

This project already has a package.json file. Would it be possible to get this published to npm for easier integration with front-end build systems?

Error when loading without JQuery

I am trying to load the modal with pure angular and using template parameter.
I get this error:
....
[jqLite:nosel] Looking up elements via selectors is not supported by jqLite!
...

The error is reported in line #179:
....
contentData.append($compile(htmlTemplate)(scope));
....

Uncaught TypeError: Cannot read property '$destroy' of undefined

Internals of this module throw TypeError exception while modal is being dismissed

cleanUp @   angular-fancy-modal.js:96
(anonymous function)    @   angular-fancy-modal.js:127
eventHandler    @   angular.js:3032

My controller:

    .controller('SessionCtrl', function ($scope, $fancyModal) {
        var modalOpt = {
            templateUrl: 'views/session/greeting.html'
        };
        $fancyModal.open(modalOpt);
    });

debugger says that $modal.scope() returns undefined

BTW, I'm experiencing that while using angularjs 1.3.15