This has been frustrating me for hours – so time to turn to the good people of SO.
In my angular app I am using ui-scrollpoint to affix a sidenav once it is scrolled to the top of the screen. It is working as intended when using an absolute scrollpoint value (ui-scrollpoint="150") but not when using a relative value (ui-scrollpoint="-100").
The problem at the moment is that the ui-scrollpoint class is applied to the element when the view is loaded (I am using ui-router), even when it shouldn't be.
Even more frustrating is that I haven't been able to recreate the problem in Plunker - here I have mocked the layout of my app - but ui-scrollpoint works as one would expect.
What could be causing this erroneous behaviour? (Documentation is non-existent)
Does the ui-scrollpoint's parents all need to be display: block and
or position: absolute? (Although I've tried this.)
Does it not work in nested states? (The plunker shows that this is
ok.)
Does it not work inside custom and/or transcluded directives. (Again - the plunker shows that this is ok.)
What styling might be on the various parent elements to make this not work?
The only thing I can think is that the class is set permanently somehow when the directive is compiled before rendering / insertion.
When ui-scrollpoint="" or ui-scrollpoint="0", the page renders correctly, but the class gets added as soon as the page is scrolled, even if the element is further down the page.
When ui-scrollpoint="-100", the class is applied from the beginning. It's as if the browser thinks the window has already scrolled past the element.
Help appreciated!
After no luck recreating the issue on Plunker and trying to find the root cause (which wasn't my custom directives and wasn't my layout), I thought to re-download and install the latest scrollpoint.js.
It is now working. Perhaps a bug in an old version. Perhaps I mistakenly edited my local copy.
Related
I created a kind of TabControl, in which I activate Pages and depending on the PageNumber I show a table (ng-repeats). This table is an own directive (a selfmade Grid-Directive).
Now I experience, that if I have less tabpages, the application is faster than if I have more tabpages - although all pages use ngIf and are not rendered until the according PageNumber is set.
I believe, it is because ngIf Compiles it's content eventhough it shouldn't but I can't quite get to the point of it when using a profiler. I just see, that "compileNodes" gets called a lot.
Does anyone experience the same? Is there an idea for a workaround?
Edit:
what's also interesting is, that the first time I go to the tabcontroll (link inside a single-page-application) it's faster and the following times it's slower. As if something is remembered although the whole tabbed-control gets deleted when navigated to another content.
Edit 2:
I'm still trying to figure it out. It could even be the ngRepeat as I'm showing my TabControl inside another TabControl which I do with ngRepeat. Interestingly enough: The first time I visit my Page it is fast, then I click to another Page and when I come back it is slow! Does ngRepeat keep some things in cache?? The Browser-Profile tells me that there are some things in jQuery's data_user -> cache which aren't free'd (in Chrome up to 9MB of Data on every click!!)
Since its a tab view use ng-switch instead of ng-if because it has to run through all the cases to display the tab rather jumping to the tab to 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; }
Utilizing angular-UI-Bootstrap 0.9.0, which has full bootstrap 3.0 support now. Awesome...with bootstrap 3.0, I could do the collapse by pointing to an ID target, but I can't figure out how to do that using the angular-UI code instead. It seems to just say, "find all isCollapsed and dump it no matter what" so now all collapsible/expandable containers operate at the same time not matter which collapse link you use. My code is identical to http://angular-ui.github.io/bootstrap/#/collapse, but with multiple collapse objects and links within the same controller. Ideas?
Shortly after posting this, I found that if you wrap each instance in the controller, each link becomes isolated. Works perfectly.
Edit: Nested controllers however do not seem to operate in the 'Collapse All/Expand All' way that I would like...Still testing.
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.