Angularjs 角度ui路由器，滚动到下一步，使用不同的控制器和模板更改状态

我在我的应用程序中使用UI路由器，我想在URL/状态发生变化时，将一个简单的“滚动到”定位点。我想在状态更改时加载新的控制器和模板。 我用的是ng样板

索引文件

因此，当您进入页面时，URL将是domain.com/home

单击第一个按钮时，我希望我的控制器代码将URL更改为domain.com/#/service，并向下滚动到“service”div，更新控制器+模板

理想情况下，当用户点击后退按钮时，它将返回到第一个URL并向上滚动到主页

---

有人知道怎么做吗？

为什么不使用本机滚动

所以基本上你想要状态的正常改变，但是触发一个滚动来控制每个，到一个特定的html元素，对吗？为什么不利用

.config（）

函数中的状态，根据每个状态的更改调用

.scrollTo（）

自定义属性

数据：{}

？给我一个活生生的例子，我会帮你试试

  <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>

<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 ) {
})

;

<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 ) {
})

;

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' ;
    }
  });
})

;