Question

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

当scrollTo不为null时

我想滚动页面到scrollTo 值。

我试过了：

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

但它不起作用

请求网址如下：

/博客/ 534f9ccb520daa8c167b3431 /的建立电子邮件换我的域？scrollTo = 53561c675541f30612ee222c＃53561c675541f30612ee222c

那有什么不对呢？

^^

更新

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);

       }
   };
});

所以你可以有一个想法......

Answer 1

角度$ AnchorScrollProvider使用document.getElementById（hash）来查找调用scrollIntoView（）的元素，但由于异步加载而失败。这可能是一种可能的解决方法：https://gist.github.com/CMCDragonkai/8055961

angular ui router滚动到一个anchor / optional参数

更新

1 个答案: