Giter VIP home page Giter VIP logo

Comments (12)

soumak77 avatar soumak77 commented on September 1, 2024

@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.

from angular-base-apps.

cjh79 avatar cjh79 commented on September 1, 2024

@soumak77 I'm using 1.2.6.

from angular-base-apps.

soumak77 avatar soumak77 commented on September 1, 2024

@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.

from angular-base-apps.

soumak77 avatar soumak77 commented on September 1, 2024

@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.

from angular-base-apps.

cjh79 avatar cjh79 commented on September 1, 2024

@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>

from angular-base-apps.

soumak77 avatar soumak77 commented on September 1, 2024

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

from angular-base-apps.

cjh79 avatar cjh79 commented on September 1, 2024

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

from angular-base-apps.

soumak77 avatar soumak77 commented on September 1, 2024

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

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

from angular-base-apps.

cjh79 avatar cjh79 commented on September 1, 2024

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

from angular-base-apps.

soumak77 avatar soumak77 commented on September 1, 2024

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.

from angular-base-apps.

soumak77 avatar soumak77 commented on September 1, 2024

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

from angular-base-apps.

cjh79 avatar cjh79 commented on September 1, 2024

That fixed it. Excellent, thanks!

from angular-base-apps.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.