角ui路由器，滾動到狀態變化與不同的控制器和模板的下一步

Question

我在我的應用程序中使用UI路由器，我想這樣一個簡單的「scrollTo」錨到URL /狀態變化。我想在狀態更改時加載新的控制器和模板。 我正在使用ng-boilerplate。

索引文件

<div class="collapse navbar-collapse" collapse="menuCollapsed" ng-click="collapse()"> 
      <ul class="nav navbar-nav navbar-right nav-link"> 
       <li ui-sref-active="active"> 
       <a href ui-sref="home"> 
        <i class="fa fa-home"></i> 
        Home 
       </a> 
       </li> 
       <li ui-sref-active="active"> 
       <a href ui-sref="service"> 
        <i class="fa fa-info-circle"></i> 
        Service 
       </a> 
       </li> 
       <li ui-sref-active="active"> 
       <a href ui-sref="portfolio"> 
        <i class="fa fa-briefcase"></i> 
        Portfolio 
       </a> 
       </li> 
       <li ui-sref-active="active"> 
       <a href ui-sref="team"> 
        <i class="fa fa-users"></i> 
        Team 
       </a> 
       </li> 
       <li ui-sref-active="active"> 
       <a href ui-sref="testimonial"> 
        <i class="fa fa-comments"></i> 
        Testimonial 
       </a> 
       </li> 
       <li ui-sref-active="active"> 
       <a href ui-sref="contact"> 
        <i class="fa fa-envelope"></i> 
        Contact 
       </a> 
       </li> 
      </ul> 
      </div> 
     </div> 
     </div> 
    <div ui-view="main"> 
    </div> 

首頁模板和JS

<div class="banner"> 
    <div class="intro-body"> 
     <h1>CREATIVE DIGITAL<br> SOLOUTIONS</h1> 
     <p>Proin iaculis consequat sem cure.</p> 
     <a href ui-sref="portfolio" class="btn btn-success">VIEW PORTFOLIO</a> 
    </div> 
</div> 


angular.module('ngBoilerplate.home', [ 
    'ui.router', 
    'plusOne' 
]) 

/** 
* Each section or module of the site can also have its own routes. AngularJS 
* will handle ensuring they are all available at run-time, but splitting it 
* this way makes each module more "self-contained". 
*/ 
.config(function config($stateProvider) { 
    $stateProvider.state('home', { 
    url: '/home', 
    views: { 
     "main": { 
     controller: 'HomeCtrl', 
     templateUrl: 'home/home.tpl.html' 
     } 
    }, 
    data:{ pageTitle: 'Home' } 
    }); 
}) 

/** 
* And of course we define a controller for our route. 
*/ 
.controller('HomeCtrl', function HomeController($scope) { 
}) 

; 

服務模板&的js

<div class="container" id="service"> 
    <div class="service-intro"> 
     <h2>Why to choose company?</h2> 
</div> 
</div> 

angular.module('service', [ 
    'ui.router' 
]) 
.config(function config($stateProvider) { 
    $stateProvider.state('service', { 
     url: '/service', 
     views: { 
      "main": { 
       controller: 'ServiceCtrl', 
       templateUrl: 'service/service.tpl.html' 
      } 
     }, 
     data:{ pageTitle: 'service' } 
    }); 
}) 
.controller('ServiceCtrl', function HomeController($scope) { 
}) 

; 

APP JS

angular.module('ngBoilerplate', [ 
    'templates-app', 
    'templates-common', 
    'ngBoilerplate.home', 
    'ngBoilerplate.about', 
    'service', 
    'portfolio', 
    'team', 
    'testimonial', 
    'contact-us', 
    'ui.router', 
    'ngAnimate' 
]) 

.config(function myAppConfig ($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise('/home'); 
}) 

.run(function run() { 
}) 

.controller('AppCtrl', function AppCtrl ($scope, $location,$rootScope) { 
     $rootScope.$on('$stateChangeStart', function() { 
     $scope.slide = $scope.slide || 'slide-left'; 
     }); 
     $scope.collapse = function() { 
     $scope.menuCollapsed = true; 
     }; 
    $scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){ 
    if (angular.isDefined(toState.data.pageTitle)) { 
     $scope.pageTitle = toState.data.pageTitle + ' | Teknuk' ; 
    } 
    }); 
}) 

; 

所以，當你進入頁面的URL會domain.com/home

當你點擊第一個按鈕，我想我的控制器代碼將URL更改爲domain.com/#/service，並向下滾動到更新的「服務」div和控制器+模板。

理想情況下，當用戶點擊後退按鈕時，它將恢復到第一個URL並回滾到家。

任何人都知道如何做到這一點？

Answer 1

爲什麼你不使用本地滾動？ https://github.com/angular-ui/ui-router/wiki/Quick-Reference#autoscroll