2

I've tried all the solutions presented here: How to handle anchor hash linking in AngularJS

But none worked for me.

In my header.html I have a link: <a id="button" href="#/views/home#page"> Contact</a></li>

To an ID in home.html

When I am in /home it works, but when I am in another page it doesn't work.

I tried using ##page with no success. Or putting this in app.js:

app.run(function($rootScope, $location, $anchorScroll, $routeParams) {
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    $location.hash($routeParams.scrollTo);
    $anchorScroll();  
  });
});

and customizing my link:

href="#/views/home/?scrollTo=page"

Can someone explain which files should I edit and how?

Edit: I started from Angular-Seed

My app.js is:

'use strict';

// Declare app level module which depends on views, and components
angular.module('myApp', [
  'ngRoute',
  'myApp.view1',
  'myApp.view2',
  'myApp.training',
  'myApp.faq',
  'myApp.media',
  'myApp.contact',
  'myApp.home',
  'myApp.apply',
  'myApp.classes',
  'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.otherwise({redirectTo: '/views/home'});
}]);

And in every view I have another js file like training.js which looks like:

'use strict';

angular.module('myApp.training', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/views/training', {
    templateUrl: 'views/training/training.html',
    controller: 'TrainingCtrl'
  });
}])

.controller('TrainingCtrl', [function() {

}]);

It is configured based on angular-seed model.

So, when, I am in view /faq that has the partial header with the menu and all the links, how can I link to a specific ID in view /home?

Community
  • 1
  • 1
Claudiu Creanga
  • 8,031
  • 10
  • 71
  • 110

1 Answers1

1

I think that the problem is that you have the logic for scrolling to that hash in the $routeChangeSuccess and as the documentation says, this event is:

Broadcasted after a route dependencies are resolved. ngView listens for the directive to instantiate the controller and render the view.

So the view is not rendered yet, therefore the DOM element with that id doesn't exist yet.

Try putting that logic in the onload event of the ngView directive instead.

I've created this plunker: http://plnkr.co/edit/S7bUT8iYY7UEti71X5Z8?p=preview that shows that if you add that logic into the onload event of the ngView directive everything works fine.

Josep
  • 12,926
  • 2
  • 42
  • 45
  • @Claudiu mmmm, interesting, let me have another look at this... Also it would help if you could please setup a "plunker" reproducing this issue. Thanks! – Josep Sep 08 '14 at 03:49
  • I'll have to create the plunker when I get home. thanks – Claudiu Creanga Sep 08 '14 at 03:58
  • @Claudiu this plunker shows that if you add that logic into the 'onload' event of the 'ngView' directive everything works. http://plnkr.co/edit/S7bUT8iYY7UEti71X5Z8?p=preview Please have a look at it and let me know if this solves your issue. Thanks! – Josep Sep 08 '14 at 04:58
  • Thanks, based on your example I managed to get it working. There were issues with the way I wrote my `ngView directive` – Claudiu Creanga Sep 09 '14 at 07:25