CODEWITHSUNDEEP
angularjsangular-ui-router
Whisher
Whisher

Reputation: 32726

angular ui router scroll to an anchor/optional parameter

url: '/blog/:id/:slug?scrollTo',

when the scrollTo is not null I want scroll the page to the scrollTo value.

I tried like:

 $scope.$on('$stateChangeSuccess', function (event, toState) {
    if($stateParams.scrollTo){
        $location.hash($stateParams.scrollTo);
        $anchorScroll();  
    }
});

but it doesn't work

the request url is like:

/blog/534f9ccb520daa8c167b3431/setting-up-email-for-my-domain?scrollTo=53561c675541f30612ee222c#53561c675541f30612ee222c

so what's wrong with it ?

^^

UPDATE

html

<body data-ng-controller="MainCtrl">
    <div id="content" data-ng-controller="viewCtrl" class="ui-view-container">
        <ul class="nav navbar-nav navbar-right">
            <li data-nb-signals="" signals="signals" labels="mapLabels" routes="mapRoutes" class="dropdown signals"></li>     </ul>
        <div data-ui-view autoscroll="true"></div>
    </div>
</body>

js

.controller('MainCtrl', function ($scope,localStorageService,Socket) {
   /* Signals socket.io */
   $scope.signals = [];
   $scope.num = 0;

   Socket.on('addedPost',function (data) {
       $scope.signals.push(data);
       $scope.num = $scope.signals.length;
   });
   Socket.on('approvedComment',function (data) {
       if(localStorageService.get('comment_id_'+data.post_id)){
           localStorageService.remove('comment_id_'+data.post_id);
           localStorageService.add('comment_id_reply_'+data.post_id,data.id);
           $scope.signals.push(data);
           $scope.num = $scope.signals.length;
       }
   });
   Socket.on('repliedComment',function (data) {
       if(localStorageService.get('comment_id_reply_'+data.post_id)){
           $scope.signals.push(data);
           $scope.num = $scope.signals.length;
       }
   });
   $scope.mapLabels = {
       added_post:'Nuovo articolo',
       approved_comment:'Commento approvato',
       replied_comment:'Replica commento'
   };
   $scope.mapRoutes = {
       added_post:'blog_details({id:signal.id,slug:signal.slug})',
       approved_comment:'blog_details({id:signal.post_id,slug:signal.post_slug,scrollTo:signal.id})',
       replied_comment:'blog_details({id:signal.post_id,slug:signal.post_slug,scrollTo:signal.id})'
   };
   /* $scope.signals.push({_id:'534f9ccb520daa8c167b3431',slug:'setting-up-email-for-my-domain','label':'added_post',title:'Ah cje bel'});
        $scope.signals.push({_id:'534f9ccb520daa8c167b3431',slug:'setting-up-email-for-my-domain','label':'approved_comment',title:'Ah cje bel'});
        $scope.signals.push({_id:'534f9ccb520daa8c167b3431',slug:'setting-up-email-for-my-domain','label':'replied_comment',title:'Ah cje bel'});*/
})
 .config(function(PREFIX_LOCAL_STORAGE,$locationProvider,$urlRouterProvider,localStorageServiceProvider,$uiViewScrollProvider) {
    $urlRouterProvider.otherwise('/');
    $locationProvider.html5Mode(true).hashPrefix('!'); 
    localStorageServiceProvider.setPrefix(PREFIX_LOCAL_STORAGE);
    $uiViewScrollProvider.useAnchorScroll();
})
 .directive('nbSignals',function($location,$stateParams,$anchorScroll) {
   return {
       restrict: 'A',
       scope:{
           signals:'=',
           mapLabels:'=labels',
           mapRoutes:'=routes'
       },
       template:   '<a data-toggle="dropdown" href="#">'+
           '<i class="glyphicon glyphicon-inbox"></i><span class="badge" data-ng-bind="signals.length"></span>'+
           '<b class="caret"></b>'+
           '</a>'+
           '<ul class="dropdown-menu">'+
           '<li data-ng-repeat="signal in signals">'+
           '<a data-ui-sref="{{mapRoutes[signal.label]}}" data-ng-click="markAsRead($index)" title="{{signal.label}}">{{mapLabels[signal.label]}}</a>'+
           '</li>'+
           '</ul>',
       controller:function($scope,$element){
           $scope.$on('$stateChangeSuccess', function (event, toState) {
               if($stateParams.scrollTo){
                   $location.hash($stateParams.scrollTo);
                   $anchorScroll();  
               }
           });
           $scope.markAsRead = function(index){
               $scope.signals.splice(index, 1);
           };
           $scope.$watch('signals',function(signal){
               $element.css('visibility', function(i, visibility) {
                   return ($scope.signals.length > 0) ? 'visible' : 'hidden';
               });
           },true);

       }
   };
});

so you can have an idea ....

Upvotes: 4

Views: 5963

Answers (1)

user1916988
user1916988

Reputation: 228

The angular $AnchorScrollProvider is using document.getElementById(hash) to find the element to call scrollIntoView() on, but it's failing because of the async load. This might be a possible fix: https://gist.github.com/CMCDragonkai/8055961

Upvotes: 1

Related Questions