On Thursday, February 27, 2014 8:23:02 AM UTC-8, Lauri Elias wrote:
>
> Also having problems. Every option (3 different raw JS implementations, a
> directive, $anchorScroll) just take me to the top of the page on Chrome 33.
> HTML:
> <a id="{{hotel.code}}"></a>
>
> JS:
> $location.hash("#" + hotel.code);
> $anchorScroll();
>
> On Thursday, 27 February 2014 02:17:20 UTC+2, David Karr wrote:
>>
>> I have a SPA using angular ui-bootstrap for the tabs component. In the
>> body of each tab I have several nested accordions, and ngTables at the
>> "leaf" nodes. In a few places I have code that attempts to activate a
>> particular tab, and open up the accordion tree until a particular table is
>> open, and then scroll to a row in the table.
>>
>> All of the code that activates the tab and opens accordions works fine.
>> What is not working is the final call to "$anchorScroll". For some reason
>> this is doing nothing.
>>
>> I'm using the following function:
>>
>> scrollTo: function (elementId) {
>>> $location.hash("#" + elementId);
>>> $timeout(function() {
>>> $anchorScroll();
>>> });
>>> },
>>>
>>>
>> I tried setting a breakpoint in this function and executing the following
>> in the Firebug console:
>>
>> angular.element("#" + elementId)
>>
>>
>> This prints out something like this (I'm eliding some of the value):
>>
>>> jQuery(tr#serviceDef-tr-<channelname>-<servicename>.ng-scope✉)
>>>
>>
>> The fact that it prints this out instead of "jQuery( )" means that this
>> is a valid and existing element.
>>
>> Almost every single time I've tested this, nothing happens on the call to
>> "$anchorScroll". Strangely enough, just a couple minutes ago, when I was
>> stepping through this code, I saw it correctly scroll to the row in the
>> table. I then tested it again and got the same do-nothing behavior. That
>> was the only time I've ever seen this work.
>>
>> The last thing I just tried a moment ago was adding a timeout value to
>> the $timeout call, starting with "1000". The first time I reloaded the
>> page with this, I saw even stranger behavior. I saw the page scroll to the
>> correct table row, but it only stayed there for a fraction of a second, and
>> then jumped back to the top of the page.
>>
>> I'm doing most of my testing in Firefox, but it demonstrates the same
>> behavior in Chrome.
>>
>> Note that the element I'm trying to scroll to is a "td" element, not a
>> "a" element. I couldn't find a clear statement about whether this should
>> work, but I found the following plunkr:
>> http://plnkr.co/edit/NvAdFWay46A9naw7zG3X?p=preview , which shows that
>> the scrolled-to element does not have to be a "a" element.
>>
>
I've managed to fix my particular problem, and I can see one obvious
problem with what you're doing.
First of all, I determined that the parameter to $location.hash() is NOT a
CSS selector, it's just an element id, so you should remove the "#" prefix.
For my problem, I discovered that putting $anchorScroll in the $timeout
block is required, but not sufficient. When I moved the $location.hash()
call into the $timeout block also, it then started working consistently.
Current and working version of my "scrollTo" function is now this:
> scrollTo: function (elementId) {
> $timeout(function() {
> $location.hash(elementId);
> $anchorScroll();
> });
> },
>
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.
