Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ModalFactory activate does not show dialog anymore #66

Closed
cjh79 opened this issue Aug 24, 2016 · 12 comments
Closed

ModalFactory activate does not show dialog anymore #66

cjh79 opened this issue Aug 24, 2016 · 12 comments
Labels
bug

Comments

@cjh79
Copy link

cjh79 commented Aug 24, 2016

I'm using angular-base-apps v. 1.2 which I downloaded via bower. (I just switched from Foundation for Apps). When I use ModalFactory to create a dialog, and then call its activate() method, the dialog does not appear.

The modal-overlay div element is being appended to the body properly, but it does not get the 'is-active' class, so it remains hidden.

I suspect the issue was introduced in this commit but am not certain as I have not been able to track down the bug:
09eff9f

Happy to help with a fix if possible, but someone who knows the code can probably do a better job of this.
@soumak77 soumak77 added the bug label Aug 24, 2016
@soumak77
Copy link
Contributor

@cjh79 which exact version are you using? The 1.2.7-* versions are prereleases for 2.0 and you would need to follow the migration steps before using those versions. Try out version 1.2.6 as a drop-in replacement and let me know if you still have this issue.

@cjh79
Copy link
Author

cjh79 commented Aug 24, 2016 •
edited
Loading

@soumak77 I'm using 1.2.6.

@soumak77
Copy link
Contributor

@cjh79 do you have a code snippet? I've been using 1.2.6 in production and haven't seen any such issues with modals.

@soumak77
Copy link
Contributor

@cjh79 modals in the 1.2.6 docs use activate and are working: http://base-apps.github.io/angular-base-apps/v1.2.6/#!/modal

I'll take a look at your code snippet to see if I can figure anything out.

@cjh79
Copy link
Author

cjh79 commented Aug 24, 2016 •
edited
Loading

@soumak77 I see the issue with this html file. The modal-overlay element is appended to body, but does not get the is-active class and has display: none.

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <link rel="stylesheet" href="http://cdn.jsdelivr.net/angular-base-apps/1.2.6/base-apps.css">
    <script src="http://cdn.jsdelivr.net/angular-base-apps/1.2.6/base-apps.js"></script>
    <script src="http://cdn.jsdelivr.net/angular-base-apps/1.2.6/base-apps-templates.js"></script>
</head>

<body ng-app="testApp" ng-controller="testAppController">

<script type="text/javascript">
    (function() {
        angular.module('testApp', [
            'foundation',
            'foundation.modal'
        ]);
        angular.module('testApp').controller('testAppController', ['ModalFactory', function(ModalFactory) {
            var modal = new ModalFactory({
                template: '<h1>the dialog</h1>'
            });
            modal.activate();
        }]);
    })();
</script>
</body>
</html>

@soumak77
Copy link
Contributor

ModalFactory does not have a template property. It only has a templateUrl property.

@cjh79
Copy link
Author

cjh79 commented Aug 24, 2016 •
edited
Loading

@soumak77 FWIW, template seems to work, nevertheless, I just did that to simplify the code -- I see the same issue when using templateUrl.

@soumak77
Copy link
Contributor

@cjh79 could you possibly try wrapping model.activate() in a $timeout?

Also, you said this example works with Foundation for Apps?

@cjh79
Copy link
Author

cjh79 commented Aug 24, 2016

Wrapping it in a $timeout did not help. Yes, it was working fine in Foundation for Apps.

@soumak77
Copy link
Contributor

I found the problem. The templates were mistakenly updated to use the base module (see https://cdn.jsdelivr.net/angular-base-apps/1.2.6/base-apps-templates.js):

angular.module('base').run(['$templateCache', function($templateCache) {

Try replacing foundation with base and foundation.modal with base.modal.

@soumak77
Copy link
Contributor

The root cause of this issue has been captured by #67

@cjh79
Copy link
Author

cjh79 commented Aug 24, 2016

That fixed it. Excellent, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@cjh79 @soumak77