は、ページNG-ビュー

Question

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> 
 
<div id="phani" data-ng-app="singlepageapp"> 
 
     <div id="sbgdiv" style="text-align: center"> 
 
      <svg 
 
       width="159.99405mm" 
 
       height="152.08751mm" 
 
       viewBox="0 0 566.90804 538.89259" 
 
       id="svg_APMap" 
 
       version="1.1" 
 
       inkscape:version="0.91 r13725" 
 
       sodipodi:docname="AndhraPradesh_Main.svg"> 
 
       <g 
 
        inkscape:label="Layer 1" 
 
        inkscape:groupmode="layer" 
 
        id="layer1" 
 
        transform="translate(-61.160142,-474.41034)"> 
 

 

 
        <path href="#/mandal" id="top" ng-click="scrollTo('bottom')" 
 
         id="Srikakulam" text="srii" 
 
         d="m 558.42493,499.65729 c 0.0521,0.0715 0.86031,-0.4859 0.95273,-0.54893 0.85757,-0.59142 1.33395,0.17218 1.90233,0.78831 0.32104,0.3471 1.10482,0.90917 1.19366,1.39752 0.071,0.39019 0.13996,0.78044 0.21104,1.17295 0.16211,0.89255 0.32204,1.7828 0.48204,2.6754 0.0444,0.25001 0.4066,0.20916 0.61177,0.25387 0.28504,0.0617 0.51063,0.30068 0.69089,0.54068 0.0977,0.12919 0.19549,0.25605 0.2825,0.39252 0.12396,0.19434 0.20952,0.0564 0.39666,-0.044 0.31621,-0.16888 0.652,-0.30298 0.97695,-0.44859 0.44334,-0.19986 0.41065,-0.26012 0.62023,0.21615 0.12227,0.27646 0.42277,0.40822 0.57083,0.67706 0.26784,0.47967 0.90803,1.22321 1.50278,1.10915 0.61847,-0.11926 1.19361,-0.68797 1.72881,-1.04939 0.12897,-0.0874 0.61396,-0.15437 0.72888,-0.049 0.32941,0.3 0.44452,0.45229 0.86745,0.48045 0.66242,0.0417 1.28025,-0.20196 1.93312,-0.34076 0.26716,-0.0576 0.49542,-0.13767 0.75157,-0.23954 0.24323,-0.0969 0.66457,-0.37831 0.92581,-0.33015 0.285,0.0524 0.77669,0.0296 1.02339,0.18377 0.2359,0.1496 0.47113,0.58539 0.65994,0.79941 0.38844,0.44414 0.76499,1.09266 1.20688,1.45351 0.3098,0.25354 0.61742,0.50479 0.92721,0.75832 0.1863,0.15304 0.67985,0.0718 0.91288,0.0853 0.27404,0.0173 0.57459,-0.25671 0.78083,-0.41843 0.34587,-0.27276 0.51632,-0.26248 0.9372,-0.21785 0.28056,0.0313 0.62284,0.31229 0.87591,0.44508 0.14927,0.0788 0.73141,0.0331 0.82995,-0.10049 0.0985,-0.13356 0.043,-0.85723 0.0527,-1.03808 0.0136,-0.27242 0.56264,-0.47694 0.76901,-0.61055 0.18058,-0.11661 0.78124,0.0671 0.9884,0.0883 0.3216,0.0327 0.58573,0.21926 0.87338,0.37242 0.0585,0.0315 1.29322,-1.02802 1.41792,-1.10586 0.65794,-0.40868 1.16992,-0.67572 1.93169,-0.6152 0.55676,0.044 0.8702,1.00589 1.43987,1.03548 0.26537,0.0153 0.71473,0.14371 0.95559,0.007 0.38066,-0.21954 0.59796,-0.32991 0.84837,-0.70377 0.15413,-0.23098 -0.025,-0.67742 0.10954,-0.91735 0.25222,-0.44428 0.54607,-0.35224 0.86201,-0.15984 0.59725,0.36447 1.10972,0.60644 1.79818,0.67331 0.18773,0.0169 0.42342,-0.29323 0.43317,-0.49285 0.0175,-0.35462 0.002,-0.55368 -0.0974,-0.8893 -0.0308,-0.10253 -0.37841,-0.59451 -0.32687,-0.63553 0.2299,-0.17635 0.44245,-0.37107 0.70502,-0.48012 0.55103,-0.22568 0.9375,-0.57674 1.03532,-1.25454 0.11034,-0.76721 -0.10658,-1.00403 -0.55151,-1.52434 -0.16713,-0.1957 -0.36804,-0.25693 -0.53101,-0.48322 -0.19991,-0.28177 -0.20512,-0.45525 -0.24802,-0.81792 -0.0519,-0.4563 0.57981,-1.32422 0.93143,-0.9074 0.18015,0.21417 0.3517,0.42855 0.52111,0.65234 0.23677,0.31381 0.36652,0.38132 0.71892,0.53302 0.21405,0.0938 0.54102,-0.0823 0.75855,-0.14113 0.1788,-0.0486 0.19562,-0.54391 0.23565,-0.72777 -0.31521,-0.0541 -0.52018,-0.0634 -0.76719,-0.27623 -0.0887,-0.0754 -0.33979,-0.21534 -0.38353,-0.32932 -0.0283,-0.0721 -0.0135,-0.53457 0.027,-0.59645 0.12629,-0.18813 0.60873,-0.33253 0.7862,-0.21918 0.34412,0.21992 0.57373,0.40486 0.85359,0.71301 0.30372,0.33342 0.45537,0.0439 0.80787,-0.19853 0.11176,-0.0752 -0.002,-0.79993 -0.11238,-0.87019 -0.27919,-0.17681 -0.55196,-0.36547 -0.84609,-0.51144 -0.26385,-0.13256 -0.63416,-0.41524 -0.19968,-0.64773 0.41518,-0.22268 0.47559,-0.22401 0.92271,-0.10257 0.29595,0.0802 0.68924,0.21934 0.77355,-0.16021 0.0569,-0.24995 0.25692,-0.78221 0.5349,-0.83528 0.18965,-0.037 0.5827,0.47034 0.70688,0.28696 0.4089,-0.59553 0.83277,-1.21016 0.0432,-1.66656 -0.21634,-0.12422 -0.11731,-0.57447 -0.19409,-0.82379 -0.1492,-0.47995 -0.059,-0.58752 0.13251,-1.0633 0.17034,-0.42368 0.35386,-0.39491 0.76728,-0.53779 0.3445,-0.11789 0.50104,-0.29494 0.77141,-0.56603 -0.33801,-0.29045 -1.02193,-0.73273 -1.15167,-1.20139 -0.10771,-0.39173 -0.21548,-0.78581 -0.32322,-1.17753 -0.079,-0.28914 -0.30636,-0.42721 -0.51447,-0.62434 0.54796,0.0113 1.32209,-0.0346 1.79202,0.31686 0.57601,0.43062 1.1499,0.86363 1.71949,1.30145 0.26465,-0.5431 0.33658,-0.81212 0.37437,-1.42056 0.0197,-0.34762 0.0914,-0.26945 0.41042,-0.30468 0.0906,-0.009 0.15731,-0.44687 0.19119,-0.56727 0.0677,-0.24076 0.13348,-0.46742 0.22936,-0.69475 0.0873,-0.21073 0.27508,-0.19378 0.47321,-0.25917 0.14858,-0.0479 0.6013,-0.10247 0.69554,-0.22652 0.10283,-0.13368 0.0751,-0.47789 0.14969,-0.65784 0.18111,-0.43332 0.64183,-0.60538 1.04451,-0.741 0.38113,-0.12807 0.29471,-0.15665 0.50002,-0.49667 0.11334,-0.18783 0.30646,-0.37744 0.45668,-0.53091 0.12228,-0.12469 0.33439,-0.40152 0.50496,-0.37246 0.20942,0.0353 0.48824,0.14635 0.70164,0.11112 0.13143,-0.0216 0.26077,-0.0433 0.39225,-0.0627 0.19397,-0.0323 0.0425,-0.12525 0.13448,-0.27042 0.12622,-0.19983 0.28491,-0.38165 0.42628,-0.56775 0.19566,0.28655 0.38913,0.57315 0.58473,0.85739 0.16737,0.24497 0.16828,0.8314 0.2281,1.13271 0.1197,0.61899 0.46816,1.2611 0.7407,1.81807 0.0742,0.15084 0.24869,0.11883 0.39765,0.14367 0.095,0.0168 0.18365,-0.35596 0.21984,-0.44589 0.11712,-0.29585 0.40748,-0.4571 0.53105,-0.75307 0.11294,-0.2676 0.38922,-0.64437 0.27128,-0.92329 -0.17908,-0.4253 -0.40012,-0.61982 -0.12168,-0.99664 0.25276,-0.34108 1.49041,-0.0236 1.83579,0.0228 0.31301,0.0423 0.6088,0.0922 0.89689,-0.0878 0.35905,-0.22612 0.25176,-0.53341 0.35115,-0.91566 0.10146,-0.39633 0.29948,-0.48049 0.18304,-0.88612 -0.1604,-0.56181 -0.19912,-0.54215 -0.71353,-0.73957 -0.28964,-0.11086 -0.6168,0.0207 -0.91852,0.072 -0.32329,0.0564 -0.52397,0.45263 -0.80848,0.49882 -0.36639,0.0599 -0.53994,-0.54873 -0.66207,-0.79467 -0.16565,-0.3318 -0.53376,-0.60045 -0.78316,-0.86235 -0.27113,-0.28724 -0.53369,-0.5864 -0.79838,-0.87846 -0.19745,-0.21849 -0.11339,-0.6473 0.20419,-0.55111 0.80153,0.23793 1.38698,0.41263 2.17429,-0.006 0.31407,-0.16647 0.69382,-0.14674 1.00563,-0.32958 0.28601,-0.16823 0.7356,0.007 1.05074,0.0496 0.0135,-0.69002 -0.0944,-1.5439 0.28651,-2.14586 0.12408,-0.19744 0.25032,-0.3973 0.37654,-0.59481 0.0386,-0.0594 0.43172,0.0607 0.50733,0.0756 0.35841,0.0671 0.7958,-0.0295 1.16023,-0.0446 0.47445,-0.0222 0.5288,0.0563 0.90374,0.39287 0.12569,0.1145 0.0254,0.35134 0.003,0.51839 -0.0395,0.28943 -0.0981,0.20861 -0.36783,0.19817 -0.25242,-0.0109 -0.91684,-0.0149 -0.74184,0.45042 0.0547,0.14424 0.32917,0.25075 0.43115,0.36814 0.11071,0.12659 0.1957,0.29829 0.29137,0.44163 -0.20655,0.10074 -0.69991,0.22194 -0.8283,0.41949 -0.32311,0.49511 -0.27381,0.43771 0.12948,0.83697 0.44015,0.43831 0.92324,0.82641 1.48739,1.04851 0.64197,0.25322 1.01723,0.66014 1.56737,1.08661 0.47862,0.36944 0.67219,0.67012 0.99648,1.22596 0.51583,0.8847 1.05532,1.75479 1.58191,2.63225 0.93786,1.56505 1.28721,2.74512 1.47188,4.66 0.17785,1.83761 -2.26394,2.71477 -2.96126,4.46287 -1.09954,1.72808 -0.71015,3.43717 -3.40215,6.47655 -2.66853,3.01289 -5.89014,5.66648 -6.5825,7.66863 -0.8708,2.51824 -1.92054,3.50834 -2.11984,4.62299 -0.56572,1.53734 -2.27222,2.51375 -3.45402,3.76951 -1.70187,1.80841 -2.99023,3.84517 -3.90061,6.01407 -1.4957,3.56375 -4.345,4.41286 -6.42708,7.63067 -2.23823,3.46053 -4.98534,0.51538 -7.73105,3.14386 -1.1823,1.60732 2.65715,-0.85534 7.22718,-1.99809 -1.01387,1.64351 -0.33242,1.35147 -1.48488,2.89012 -1.03682,1.38595 -13.32578,12.33131 -12.87297,14.5907 -1.58931,0.91493 -0.79134,-0.16557 -0.8114,2.51541 -3.39821,1.91448 -1.01061,2.59785 -4.68878,3.76784 -2.3118,0.73469 -5.28941,4.60841 -8.37362,4.54691 -1.81716,-0.0363 0.52062,0.52997 -0.88766,0.69252 -1.94022,0.22361 -1.14953,0.95931 -3.06721,1.36543 -0.94802,0.20161 -2.19788,1.78225 -3.14378,1.98856 -0.91786,0.20095 -1.87497,0.32306 -2.73554,0.75263 -0.66696,0.33383 -1.2859,0.77447 -1.98125,1.0362 -0.83532,0.31176 -1.72844,0.29637 -2.59364,0.25219 -0.57826,-0.0293 -1.33261,0.0858 -1.85391,-0.18882 -0.33311,-0.1756 -0.66192,-0.35599 -0.98647,-0.54583 -0.5712,-0.3322 -1.03926,-0.74174 -1.52484,-1.20253 -0.11055,-0.1031 -0.31835,-0.6592 -0.31919,-0.81869 -0.004,-0.25326 0.23508,-0.83096 0.35904,-1.05187 0.36331,-0.65082 0.90936,-1.00779 1.52268,-1.28176 0.56169,-0.25172 1.02333,-0.66312 1.55663,-0.97756 0.54192,-0.31933 1.3794,-0.6311 1.40341,-1.40112 0.0278,-0.88266 -0.21415,-1.36056 -0.73953,-2.00343 -0.43419,-0.52994 -0.89761,-0.88092 -1.20937,-1.51444 -0.0915,-0.18802 -0.01,-0.57222 -0.017,-0.79259 -0.0102,-0.36103 0.039,-0.79375 -0.0404,-1.14389 -0.15239,-0.68161 -0.24249,-1.41624 -0.80973,-1.81188 -0.60616,-0.42054 -1.12915,-0.61304 -1.83531,-0.76396 -0.27857,-0.0595 -0.54441,-0.15449 -0.81663,-0.24466 -0.29172,-0.0968 -0.66213,0.024 -0.9453,-0.0964 -0.12324,-0.051 -0.59761,-0.4278 -0.58538,-0.56649 0.0389,-0.42076 0.0753,-0.84385 0.11421,-1.26461 0.0632,-0.70519 0.15229,-1.40389 0.20469,-2.11118 0.0483,-0.64854 -0.54595,-1.28519 -0.92563,-1.70373 -0.44475,-0.49216 -0.83728,-0.89868 -0.61038,-1.63799 0.11668,-0.38027 0.23334,-0.76056 0.35001,-1.13848 0.10182,-0.33068 0.4451,-0.6855 0.63128,-0.96877 0.29105,-0.44514 0.71871,-1.16309 0.73749,-1.70306 0.0242,-0.73011 0.11552,-1.42418 -0.0264,-2.13654 -0.13956,-0.70539 -0.37217,-1.465 -0.0282,-2.12008 0.33961,-0.64794 0.8417,-1.15407 1.32213,-1.68316 0.148,-0.16515 0.14248,-0.80781 0.17795,-1.03614 0.0356,-0.21662 -0.29233,-0.63395 -0.474,-0.72141 -0.25517,-0.12104 -0.74217,-0.0329 -1.02271,-0.0453 -0.31496,-0.0142 -0.62997,-0.0307 -0.94715,-0.0447 -0.69907,-0.0338 -1.3491,-0.17891 -2.03578,-0.3232 -0.58521,-0.12309 -1.22737,0.009 -1.8294,-0.0321 -0.71423,-0.0499 -0.22508,-1.38849 -0.11298,-1.81792 0.0528,-0.20292 0.17336,-0.67243 -0.056,-0.81748 -0.30947,-0.19488 -0.61453,-0.36876 -0.8855,-0.62316 -0.11488,-0.10772 -0.44548,-0.63058 -0.19817,-0.77211 0.32046,-0.18304 0.63228,-0.36589 0.93966,-0.57446 0.52231,-0.35409 1.11599,-0.67454 1.49506,-1.20605 0.44967,-0.6293 0.74664,-1.18013 0.52897,-1.96824 -0.0661,-0.24251 -0.30417,-0.42257 -0.33781,-0.66814 -0.0539,-0.39761 -0.12063,-0.79728 -0.15938,-1.19522 -0.0684,-0.71866 -0.0808,-1.45033 -0.10626,-2.17466 -0.007,-0.19218 0.41732,-0.63794 0.52007,-0.79035 0.16482,-0.24296 0.33327,-0.61968 0.56095,-0.80065 0.57357,-0.45845 1.14926,-0.91692 1.72713,-1.37076 0.48769,-0.38145 0.607,-1.07849 1.22318,-1.21882 0.78209,-0.17919 1.38093,-0.33791 2.09506,-0.72673 0.59795,-0.32527 1.16605,-0.58887 1.73127,-0.98846 0.27509,-0.19376 0.023,-0.56118 0.0924,-0.86769 0.061,-0.27816 0.33529,-0.64551 0.5676,-0.77266 0.56782,-0.31051 1.18556,-0.1553 1.78612,0.0142 0.25925,0.0716 0.63124,0.26752 0.90079,0.24981 0.414,-0.0303 0.82585,-0.0581 1.23985,-0.0883 0.25661,-0.0174 0.4331,-0.0894 0.67852,-0.18862 0.25831,-0.10425 0.75181,-0.1879 0.95781,-0.39188 0.27472,-0.27119 0.54939,-0.54234 0.8241,-0.81354 0.23606,-0.23277 0.34169,-0.65736 0.47815,-0.96299 0.13435,-0.2986 0.34223,-0.55889 0.51989,-0.82557 0.20547,-0.30952 0.30526,-0.61202 0.43066,-0.97137 0.0978,-0.27428 0.15671,-0.55241 0.21995,-0.83766 0.0569,-0.24993 0.29142,-0.78998 0.19308,-1.03181 -0.10269,-0.25342 -0.196,-0.76981 -0.43391,-0.89357 -0.3331,-0.17557 -0.6512,-0.37027 -0.97364,-0.56958 -0.23807,-0.1472 -0.54727,-0.29051 -0.73816,-0.49505 -0.14098,-0.14936 -0.47793,-0.6486 -0.50059,-0.85924 -0.0727,-0.72561 -0.14315,-1.39031 -0.5669,-1.99319 -0.16523,-0.24267 -0.34126,-0.49446 -0.51729,-0.74392" /> 
 
</svg> 
 

 
</div> 
 
<div id="bottom" ng-click="scrollTo('top')" autoscroll="true" class="ng-view"> 
 
      <!-- 
 
        This DIV loads templates depending upon route. 
 
      --> 
 
     </div> 
 
</div>

斐伊川Frndzでレンダリングした後smoothscrollingを作る方法を、私は私は、ページに一度smoothscrollそれまではNGビューのdivのfunctionallityをachiveしようとしていますここangularjsを使用してSPAを作成しましたルーティングは、私がsvgのパスをクリックしたときに行われます。リダイレクトすることはできますが、スクロールできないので、機能を実現するために私を助けてください。

Answer 1

ビューコンテンツがロードされると、それは$viewContentLoadedです。しかし、DOMで作業したい場合は、ダイジェスト段階の実行が終了するまで待つ必要があります。あなたは$タイムアウトを使ってこれを行うことができます。

$scope.$on('$viewContentLoaded', function() { 
    $timeout(function() { 
    // Do your scrollTo() or other DOM related stuff here 
    }, 0); 
}); 

このコードは、コントローラで表示する必要があります。

Answer 2

<script> 
 
     var app = angular.module('singlepageapp', ['ngRoute']) 
 
     app.run(function ($rootScope) { 
 
      $rootScope.$on('$viewContentLoaded', function() { 
 
       $('html, body').animate({ 
 
        scrollTop: $("#bottom").offset().top, 
 
       }, 2000); 
 
      }); 
 
     }); 
 
    </script>

ワーキングファイン