I'm using Angular 1.2.18, ng-animate 1.2.18 and ui-router 0.2.10 (but I've tried with latest build from git repo). When I enable animations and define my transition css, it all seems to work fine, if state change is triggered by clicking link with href / ui-sref. But when I use $state.go('mystate'), it does change the state properly as always, but the transition is not playing at all.
All those libs even compatible with each other?
Related
i find the solution AngularJS and UI-Router: 'Error: transition superseded' during angularjs unit tests but this not work for me.
AngularJs version v1.6.1
Ui-routing Version v0.3.2
I solved it.
In my project, root state is login state if login is successful then it goes to admin.dashboard state, where admin state was an abstract state.
I used$state.transitionTo method instead of $state.go when transitioning to the admin.dashboard state.
I've also added on app.config section.
$qProvider.errorOnUnhandledRejections(false);
TL;DR
View is fading in at the beginning when using ES5 (ES5 Example)
View does NOT fade in when using Typescript import (Typescript and ES6 Import Example)
I am currently experimenting with Typescript, ES6 modules and how to integrate all those technologies. In most cases everything works finde. However, I'd like to animate the ui-view with ngAnimate and here comes the problem. Somehow, if I am using ES6 modules and its import statement, it seems that my dependencies are lazy loaded, so that ngAnimate will not work during the initial page load. Once the page has been loaded, the animation works just fine, e.g. animating the view in and out if the user clicks on a link. What I'd like to see is that the ui-view fades in at the beginning.
I have set up two Plunker to demonstrate both the behaviour with an app in plain old ES5 and a Typescript one, that uses SystemJS and the import statement to load its dependencies.
Here is the ES5 example. If you run this Plunker you will notice how the view fades in at the beginning. All I did was including the files via script tag in the index.html. The animation is done via plain CSS:
ui-view.ng-enter {
animation: fadeIn .5s ease both;
animation-delay: .3s;
}
ui-view.ng-leave {
animation: fadeOut .5s ease both;
}
Here is the Typescript example. You will hopefully see the difference, that the view will not fade in even though it uses the same animation mechanism. The only difference here is that I am using Typescript (shouldn't be the problem) and ES6 modules which get imported via import. It somehow seems that if I am using import ngAnimate is not fully loaded or maybe not even loaded at all at the time the page loads up. Maybe it's lazy loaded?
I'd really like to get this stack working, because it is so much more fun and modern. Any ideas?
After some investigation and the help of one of the Angular team members I found out that ngAnimate disables all animations on load for the first two digest by default. This means if it detects any remote assets being downloaded then it keeps waiting until they are ready. This is somehow the case when you are using Typescript / ES6 modules. You can work around this situation and guarantee that all animations run on bootstrap even though remote assets are being downloaded by creating a directive to enable animations with $animate.enabled(true);. You can either place the directive on the body or html tag. In the Plunker above I have added the directive to the body tag. This is what you need:
<body allow-animations-on-load>
<ui-view></ui-view>
</body>
app.directive('allowAnimationsOnLoad', ['$animate', function($animate) {
$animate.enabled(true);
}]);
I have also updated the corresponding Plunker. As you can see the animation is now fading in on bootstrap.
I am using Angular 1.3.14 with Angular Route.
Now, I have some specific links like this one:
<a target="_self" ng-href="#next" role="menuitem">Next</a>
And on this link there is a jQuery plugin attached, that opens/closes the accordion. Now currently, it just takes AngularJS routing into effect and redirects me to /#next. How can I disable that ?
I have tried setting target="_self", but no luck.
Plunker: http://plnkr.co/edit/Sjfb3Esx1NsjwaYGLMGZ?p=preview
Accordion is in the servers tab.
The plunker actually works. My real app does not. The only thing that plunker is not really replicating is the ui-router stuff. On my actual app the accordion won't open. Other questions on SO say that ui.bootstrap is not included and that fixed their problem. I do have ui.bootstrap included though.
I've also tried copying and pasting the example from http://angular-ui.github.io/bootstrap/ that doesn't work either.
I'm at a loss for what else to look for.
More info:
I'm not getting any errors. Also other ui-bootstrap directives work just fine. I'm using tabs on this same page, and modal and dropdown work on other pages.
there is an issue with some version of angular-ui, the js assumes that one atleast one accordion is open and tries to calculate width. But bootstrap hides all accordions. So try displaying one accordion through css, i.e. set the display property of the accordion.
As per my comment:
It's my template. Somehow my template files are out of sync with the js files. In the template it is calling ng-click="toggleOpen()" which does not exist in my code. When I roll that back to ng-click="isOpen = !isOpen" everything works as expected. I need to figure out why my templates and js files are out of sync.
I installed ui-bootstrap using bower which does not include template files. I need to disable template caching during development so I can't use the tpls code. I downloaded the template directory from github and some of the templates simply do not match up with the version of code that bower downloads. I updated the template file to an older version that correctly matches the code from bower. Everything works now.
We have an Angular UI Bootstrap Collapse directive in our Angular app. When we change the contents of the collapse, we would like the div to update appropriately.
However, apparently the height is set in the style when the collapse is opened and does not update if we change the contents of the collapse element. If I change the contents while it is open, then the height does not change. This seems like it should be taken care of automatically. Is this a known issue and what is a good way to get around it?
Using Angular 1.2.2, UI 0.9.0, and Bootstrap 2.3.2
Version 0.9.0 of the angular-ui/bootstrap is not compatible with Bootstrap 2.3.2 CSS. 0.8.0 is the last version that supports Bootstrap 2.3.2 CSS. You either need to use 0.8.0 or migrate to Bootstrap 3.