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

发布时间：2020-12-17 16:58:07 所属栏目：安全来源：网络整理

导读：url: '/blog/:id/:slug?scrollTo', 当scrollTo不为null时我想滚动页面到scrollTo 值. 我尝试过： $scope.$on('$stateChangeSuccess',function (event,toState) { if($stateParams.scrollTo){ $location.hash($stateParams.scrollTo); $anchorScroll(); }});

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

当scrollTo不为null时
我想滚动页面到scrollTo
值.

我尝试过：

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

但它不起作用

请求网址如下：

/博客/ 534f9ccb520daa8c167b3431 /设置-UP-电子邮件换我的域？scrollTo = 53561c675541f30612ee222c#53561c675541f30612ee222c

那有什么不对呢？

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>

.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,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','label':'approved_comment','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',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);

       }
   };
});

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

解决方法

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!