I am using UI router in an angular application where basic animations of views using ng-enter(-active) and ng-leave(-active) classes are not enough. I have already used $stateChangeStart event in an app before to scroll up before the statechange but I would like to work with the ui-views even more.
Therefore I tried to find out how the statechange process affects ui-view elements in DOM, but somehow I can't find what I am looking for.
The process I researched fires events in following order: stateChangeStart > viewContentLoading > stateChangeSuccess > viewContentLoaded. Unfortunately when I look at the DOM (using Chome dev console), only during the last breakpoint (viewContentLoaded) there are both ui-views in DOM (the "fromState ui-view" and the "toState ui-view").
I've been thinking of fading the former ui-view element, doing some other stuff and then fading the new ui-view element in so I was looking for an event where only the former ui-view exists, then both and then only the new. This way it seems to me that I should perform all the animations inside the viewContentLoaded callback which seems inappropriate.
Am I missing something in the whole concept or is there another events or approaches to this? Thanks in advance for any hints or links...
Related
What is the difference between $scope.$parent and $broadcast?
Everything is different. They're not related at all. Two completely different things - not even the same JavaScript type.
$scope.$parent is a reference to the parent scope object, while $broadcast is a function to broadcast an event.
Basically im writing a common layout.
Inside common layout developer will write his code using ui-view.The common layout will have button events when fired it should change the state of ui-view which is nested.
For this if i use components i think i cant achieve because
Top-framwrok(buttons,titles e.t.c)
Body-developer-this part is an ui-view
Bottom-framwork(border ending and some styles)
So for framwork i will have controller
So when firing any change in framework should trigger developer template also.
I'm re-working a website that has a very nested interface requiring several child views. Think of a shopping site, with paging, results and filters. What I'd like to do is render default content for said children views while the results are being resolved from the back-end. However, I can't find a way to insert default content past the first <ui-view>, which of course, makes sense.
To get around this, we are currently using $broadcast in the child state controllers. We moved the resolution out of the resolve event into the controller, which is working, but requires us to make all of our directives use $broadcast as well, or they don't work since the data isn't loaded before they are. It also seems like a very inelegant solution to the issue.
What's weird, is that when I move the resolve function into a child view, neither the parent nor it's siblings views load before the results child view loads. I can't understand that whereas I can understand children views not loading before the parent is resolved.
Is there a way we can work around this? Building in broadcasting into all aspects of our code base seems like an extremely poor practice. Is there a way to show children default content before the parent is resolved, or even render child states' views before their controllers are instantiated?
Use ng-cloak class:
https://docs.angularjs.org/api/ng/directive/ngCloak
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
It's normal that AngularJS creates a new ng-view every time a route is loaded, and then destroys the previous ng-view? It's just a fraction of time, but I can see both views on my app, and some directives which gather the element top also notice that behaviour (it seems that compilation is done before the original ng-view is removed from the DOM)
Has someone noticed this behaviour?
Yes, it's normal, this allows you to have transitions when the view gets replaced.
From the official documentation of ngView:
enter - animation is used to bring new content into the browser. leave
- animation is used to animate existing content away.
The enter and leave animation occur concurrently.
Actually ngView is not the only directive that behaves like that, for instance ngRepeat behaves exactly the same.
If you want to make sure that your views don't overlap, you could try this.
Add a class to the element of the ng-view so that you can easily target it from your css, something like this:
<div ng-view class="your-view"></div>
And then in your css do this:
.your-view.ng-leave { display:none; }
I am using a directive "slideable" which creates a slideout area and has a toggle. This code that was not written by me but it demonstrates a larger issue for me. When I changing views (most commonly /user/:id type), slideable is a directive used on the template. The directive searches for an element during its link function and binds a click event. The issue is that when I am changing routes and the new view ( same type but different id ) is being loaded the directive is re-binding to the old view. If I stop the browser in chrome during the link then I will see two ng-views on the dom and the issue is it binds to the one that is leaving.
I also have other issues that appear to be related to this phenomenon. Is it normal that the old view would still be on the dom while the new view is being formulated?? Why wouldnt the old-view be destroyed before the new one is rendered? How do I get around this issue in a directive like this?
Thanks.
I am looking to understand conceptually what is happening. I already modified the directive to select the latest view and to appropriately search and bind to the correct element. But I am a bit perplexed as to why there would be a state where both co-exist on the dom.
One definitive reason why the old HTML fragment is briefly present along with the new one is to support animation of transitions from the old to the new. Take a look at the ngView documentation and you'll see an example of an animated transition, and it'll be clear that this is not a bug or a design flaw.
Usually when someone has problems with binding to the right element or element's event, it's because they are selecting the element without limiting the scope of the selector to the HTML fragment being added or updated, or trying to target parts of the DOM outside of the directive. So that's the first place to check, that the directive is doing things right, but like I said we'll need code to check on that.
Getting into ngAnimations; I was wondering how page transition could completely be controlled.
I mean by this : being able to control the same way an ng-leave as it is done for the ng-enter while having a change in the url in the process. New to angular but I'd described it as trying to get some ng-leave control before an ng-view change.
As far as I've searched, the ng-leave state only has a meaning with ng-switch (there is another ng but you got the idea); which for the moment means for me that all the elements have to be already in the page and that no url change are involved in the process.
If any help, highly appreciated. I've found the ng-animations really cool but thinking that this point is quite missing.
Assuming there might be another pattern to follow probably though.
Have you read:
Animation in AngularJS
http://www.yearofmoo.com/2013/04/animation-in-angularjs.html
Enhanced Animation in AngularJS
http://www.yearofmoo.com/2013/05/enhanced-animations-in-angularjs.html
Remastered Animation in AngularJS 1.2
http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html
I have found these useful.