search

thisissoon / angular-scrollspy

A simple lightweight library for Angular which automatically updates links to indicate the currently active section in the viewport
MIT License
35 stars 15 forks source link

<a> not clickable with binding #8

Closed GianLaz closed 6 years ago

GianLaz commented 6 years ago

It doesn't work with href binding. For example:

<ul class="nav" snScrollSpy id="scrollspyMenu"> <li class="nav-item" *ngFor="let link of menu; trackBy:commonsService.ngForTrackBy" ><a snScrollSpyItem for="scrollspyMenu" class="nav-link" href="{{link.scrollTo}}">{{link.name}}</a></li> </ul>

this static version works:

`

mohitdia commented 6 years ago

Try [attr.href] instead of href as it's an attribute binding.

GianLaz commented 6 years ago

Hi, thanks for the tip but now we have another issue:

ERROR TypeError: Cannot read property 'replace' of undefined at ScrollSpyItemDirective.get [as section] (thisissoon-angular-scrollspy.js:49) at thisissoon-angular-scrollspy.js:182 at Array.find (<anonymous>) at QueryList.push../node_modules/@angular/core/fesm5/core.js.QueryList.find (core.js:5441) at ScrollSpyService.push../node_modules/@thisissoon/angular-scrollspy/fesm5/thisissoon-angular-scrollspy.js.ScrollSpyService.setSpySectionStatus (thisissoon-angular-scrollspy.js:182) at ScrollSpySectionComponent.push../node_modules/@thisissoon/angular-scrollspy/fesm5/thisissoon-angular-scrollspy.js.ScrollSpySectionComponent.onInViewportChange (thisissoon-angular-scrollspy.js:320) at Object.eval [as handleEvent] (ScrollSpySectionComponent.html:4) at handleEvent (core.js:11107) at callWithDebugContext (core.js:12204) at Object.debugHandleEvent [as handleEvent] (core.js:11907)

This is my code:

<ul class="nav" snScrollSpy id="scrollspyMenu"> <li class="list-inline-item" *ngFor="let link of menu; trackBy:commonsService.ngForTrackBy" > <a *ngIf="!link.scrollTo" class="nav-item nav-link" routerLink="{{link.href}}" routerLinkActive="{{link.activeClass}}">{{link.name}}</a> <a *ngIf="link.scrollTo" class="nav-link" snScrollSpyItem scrollTo [attr.href]="link.scrollTo" for="scrollspyMenu">{{link.name}}</a> </li> </ul>

edoparearyee commented 6 years ago

@GianLaz you'll need to set both [attr.href] and [href]. For some reason using the bracket syntax here only sets the property and not the attribute as well.