target ='_ self'不工作angularjs？

Question

我想向下滾動到angularjs中的部分，當我使用href標記導航到下一頁時。有沒有辦法做到這一點？

<ul> 
    <li><a href="#section-1" target="_self" du-smooth-scroll du-scrollspy>Section 1</a></li> 
    <li><a href="#section-2" target="_self" du-smooth-scroll du-scrollspy>Section 2</a></li> 
    <li><a href="#section-3" target="_self" du-smooth-scroll du-scrollspy>Section 2</a></li> 
    <li><a href="#section-4" target="_self" du-smooth-scroll du-scrollspy>Section 2</a></li> 
    <li><a du-smooth-scroll="section-3" du-scrollspy>Section 3</a></li> 
    <li><a href="http://github.com/oblador/angular-scroll/">Project on Github</a></li> 
</ul> 

HTML

<section id="section-1"> 
    <h2>Section 1</h2> 
    <p>Bacon ipsum dolor sit amet sausage tail capicola ground round hamburger ham hock. Short ribs pig andouille meatball, pastrami tri-tip fatback ham hock shank kielbasa swine. Rump pancetta jerky kielbasa doner beef ribs tongue hamburger strip steak drumstick andouille shoulder shank flank. Swine drumstick meatball pig beef sausage strip steak.</p> 

    <img src="http://lorempixel.com/1000/500/" alt="" /> 
    </section> 

    <section name="section-2"> 
    <h2>Section 2</h2> 
    <p>Bacon strip steak ground round, tongue pastrami short ribs pork chop venison turducken sausage sirloin. Flank chicken pork chop capicola turkey turducken cow pork loin biltong meatball drumstick pancetta filet mignon ground round fatback. Ham hock jerky short ribs brisket. Meatloaf shoulder pork chop capicola, sirloin swine pig pork. Jerky ribeye hamburger pork loin sirloin kevin bresaola boudin chuck flank. Ham hock pork belly chicken jerky rump bresaola.</p> 
    </section> 

    <section id="section-3"> 
    <h2>Section 3</h2> 
    <p>Shank fatback pastrami short loin, turkey jowl kielbasa ribeye chicken jerky drumstick flank ham. Swine shankle pork belly kielbasa shoulder flank jowl, sirloin doner. Kevin tri-tip bresaola leberkas. Swine ball tip cow strip steak. Ham filet mignon pork chop, pork fatback andouille pork loin shoulder jowl swine strip steak turducken prosciutto rump.</p> 

    <img src="http://lorempixel.com/1000/400/" alt="" /> 

    <p>Tongue tri-tip pastrami, shoulder rump pork belly ground round. Ham hock chuck leberkas doner, strip steak corned beef tri-tip capicola. Rump turkey ham sausage shankle. Flank shankle pork chop ham hock. Shankle venison kielbasa, pancetta swine beef ball tip t-bone bacon hamburger ground round ribeye flank. Turducken bacon bresaola, chicken kevin boudin ball tip strip steak filet mignon pork turkey shank ground round. Kielbasa fatback prosciutto pork chop, jerky ground round leberkas boudin ball tip beef shankle shoulder swine brisket.</p> 
    </section> 

    <section id="section-4"> 
    <h2>Section 4</h2> 
    <img src="http://lorempixel.com/1000/600/" alt="" /> 

    <p>Shoulder cow tenderloin chuck, pork chop jerky doner leberkas. Chuck sausage hamburger, kevin beef pork chop pork shoulder ground round ball tip turducken flank. Bresaola tri-tip meatloaf, salami venison tail pig shank shankle jowl sausage brisket cow biltong turducken. Swine turducken hamburger ball tip short loin prosciutto kevin jowl tri-tip. Doner meatloaf pork brisket.</p> 
    </section> 
    <footer> 
    <button ng-click="toTheTop()">Take me back!</button> or <button ng-click="toSection3()">To section 3</button> 
    </footer> 
</div> 

和我的控制器

sidemenu.controller('unitTypeCtrl', ['$scope', '$rootScope', '$location', '$http', 'allServices','$document','PropertyDetails','$routeParams','$window','typeServices','$location', '$anchorScroll', function (a, b, c, d, e,f,h,r,w,t,l,s) { 

    b.contactwdgt=""; 
    b.header = true; 
    b.homepage = false; 
    b.filter = false; 
    b.innerHeader = "inner-page-hdr"; 
    a.composite=false; 
    a.groupProp=[]; 
    a.gridView=""; 
    a.listclass="prprt-list-ctr row"; 
    a.view="true"; 

    a.toTheTop = function() { 
     f.scrollTopAnimated(0, 5000).then(function() { 
     console && console.log('You just scrolled to the top!'); 
     }); 
    } 
    var section3 = angular.element(document.getElementById('section-3')); 
    a.toSection3 = function() { 
     f.scrollToElementAnimated(section3); 
    } 

}]); 

Answer 1

有三種情況AngularJS將進行重新加載整個頁面：

Links that contain target element 
Example: <a href="/ext/link?a=b" target="_self">link</a> 
Absolute links that go to a different domain 
Example: <a href="http://angularjs.org/">link</a> 
Links starting with '/' that lead to a different base path when base is defined 
Example: <a href="/not-my-base/link">link</a> 

您可以實現描述AngularJS doc example

AngularJS doc

Answer 2

angular.module('myApp', ['duScroll']). 
 
    controller('MyCtrl', function($scope, $document){ 
 
    $scope.toTheTop = function() { 
 
     $document.scrollTopAnimated(0, 5000).then(function() { 
 
     console && console.log('You just scrolled to the top!'); 
 
     }); 
 
    } 
 
    var section3 = angular.element(document.getElementById('section-3')); 
 
    $scope.toSection3 = function() { 
 
     $document.scrollToElementAnimated(section3); 
 
    } 
 
    } 
 
).value('duScrollOffset', 30);

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script> 
 
<script src="http://oblador.github.io/angular-scroll/angular-scroll.min.js"></script> 
 

 
<body ng-app="myApp" ng-controller="MyCtrl"> 
 
<ul> 
 
      <li><a href="#section-1" du-smooth-scroll du-scrollspy>Section 1</a></li> 
 
      <li><a href="#section-2" du-smooth-scroll du-scrollspy>Section 2</a></li> 
 
      <li><a href="#section-3" du-smooth-scroll du-scrollspy>Section 3</a></li> 
 
      <li><a href="#section-4" du-smooth-scroll du-scrollspy>Section 4</a></li> 
 
      <li><a href="#section-3" du-smooth-scroll="section-3" du-scrollspy>Section 3</a></li> 
 
      <li><a href="http://github.com/oblador/angular-scroll/">Project on Github</a></li> 
 
</ul> 
 
    <div> 
 
<section id="section-1"> 
 
    <h2>Section 1</h2> 
 
    <p>Bacon ipsum dolor sit amet sausage tail capicola ground round hamburger ham hock. Short ribs pig andouille meatball, pastrami tri-tip fatback ham hock shank kielbasa swine. Rump pancetta jerky kielbasa doner beef ribs tongue hamburger strip steak drumstick andouille shoulder shank flank. Swine drumstick meatball pig beef sausage strip steak.</p> 
 

 
    <img src="http://lorempixel.com/1000/500/" alt="" /> 
 
    </section> 
 

 
    <section id="section-2"> 
 
    <h2>Section 2</h2> 
 
    <p>Bacon strip steak ground round, tongue pastrami short ribs pork chop venison turducken sausage sirloin. Flank chicken pork chop capicola turkey turducken cow pork loin biltong meatball drumstick pancetta filet mignon ground round fatback. Ham hock jerky short ribs brisket. Meatloaf shoulder pork chop capicola, sirloin swine pig pork. Jerky ribeye hamburger pork loin sirloin kevin bresaola boudin chuck flank. Ham hock pork belly chicken jerky rump bresaola.</p> 
 
    </section> 
 

 
    <section id="section-3"> 
 
    <h2>Section 3</h2> 
 
    <p>Shank fatback pastrami short loin, turkey jowl kielbasa ribeye chicken jerky drumstick flank ham. Swine shankle pork belly kielbasa shoulder flank jowl, sirloin doner. Kevin tri-tip bresaola leberkas. Swine ball tip cow strip steak. Ham filet mignon pork chop, pork fatback andouille pork loin shoulder jowl swine strip steak turducken prosciutto rump.</p> 
 

 
    <img src="http://lorempixel.com/1000/400/" alt="" /> 
 

 
    <p>Tongue tri-tip pastrami, shoulder rump pork belly ground round. Ham hock chuck leberkas doner, strip steak corned beef tri-tip capicola. Rump turkey ham sausage shankle. Flank shankle pork chop ham hock. Shankle venison kielbasa, pancetta swine beef ball tip t-bone bacon hamburger ground round ribeye flank. Turducken bacon bresaola, chicken kevin boudin ball tip strip steak filet mignon pork turkey shank ground round. Kielbasa fatback prosciutto pork chop, jerky ground round leberkas boudin ball tip beef shankle shoulder swine brisket.</p> 
 
    </section> 
 

 
    <section id="section-4"> 
 
    <h2>Section 4</h2> 
 
    <img src="http://lorempixel.com/1000/600/" alt="" /> 
 

 
    <p>Shoulder cow tenderloin chuck, pork chop jerky doner leberkas. Chuck sausage hamburger, kevin beef pork chop pork shoulder ground round ball tip turducken flank. Bresaola tri-tip meatloaf, salami venison tail pig shank shankle jowl sausage brisket cow biltong turducken. Swine turducken hamburger ball tip short loin prosciutto kevin jowl tri-tip. Doner meatloaf pork brisket.</p> 
 
    </section> 
 
    <footer> 
 
    <button ng-click="toTheTop()">Take me back!</button> or <button ng-click="toSection3()">To section 3</button> 
 
    </footer> 
 
</div> 
 

 
</body>

解決方案