Comments (12)
@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.
@soumak77 I'm using 1.2.6.
from angular-base-apps.
@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.
@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.
@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.
ModalFactory does not have a template
property. It only has a templateUrl
property.
from angular-base-apps.
@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.
@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.
Wrapping it in a $timeout did not help. Yes, it was working fine in Foundation for Apps.
from angular-base-apps.
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.
The root cause of this issue has been captured by #67
from angular-base-apps.
That fixed it. Excellent, thanks!
from angular-base-apps.
Related Issues (20)
- Is this project active?
- Implement Foundation-Apps-Modal tools HOT 11
- ModalFactory does not support ba-advise attribute
- Position Action Sheet HOT 3
- SCSS fails to compile in existing project HOT 3
- Transforming panel not working HOT 2
- Add support for ui-router 1.0 HOT 1
- baCloseAll can cause modal dialogs to close immediately after opening HOT 1
- baSwipeClose breaks touch scrolling
- On 1.2.6, setting $notification-default-position does not work HOT 2
- Angular 2 layout engine HOT 4
- Creative usage of selector-replace() in 4-wandering-cubes.scss throws error on libsass 3.5.0.beta.2 HOT 3
- Update Angular to version 4, released March 2017 HOT 1
- Angular 2 (now 4) support? HOT 1
- Auto-close action sheet HOT 2
- Unable to show HTML content on the notification HOT 4
- How to update in angular-base-apps from foundation-apps HOT 1
- Sass compilation error with v2.0.11 HOT 2
- active-true not firing in IE Edge (15 & 16) HOT 2
- Build broken after updating to latest gulp-sass
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-base-apps.