个人中心
gpt4 book ai didi

angularjs - angular ui 路由器滚动到 anchor /可选参数

转载 作者：行者123 更新时间：2023-12-01 05:12:56 25 4
gpt4 key购买 nike 

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

当 scrollTo 不为空时
我想将页面滚动到 scrollTo
值(value)。

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

但它不起作用

请求网址是这样的:

/blog/534f9ccb520daa8c167b3431/setting-up-email-for-my-domain?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);

       }
   };
});

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

最佳答案

Angular $AnchorScrollProvider 正在使用 document.getElementById(hash) 来查找要调用 scrollIntoView() 的元素，但由于异步加载而失败。这可能是一个可能的修复方法:https://gist.github.com/CMCDragonkai/8055961

关于angularjs - angular ui 路由器滚动到 anchor /可选参数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23214371/

25 4 0
文章推荐： java - 来自 MappedByteBuffer 的 DataInputStream
文章推荐： chef-infra - 可以从同一属性文件中引用 Chef 属性吗？
文章推荐： linq - 使用 Linq-to-XML 插入，带线程
文章推荐： java - 如何从 jlabel 或 jbutton 中的 imageicon 获取图像？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com