Question

我在我的应用程序中使用UI路由器，当URL /状态发生变化时，我想对锚点进行简单的“scrollTo”。我希望在状态发生变化时加载新的控制器和模板。我正在使用ng-boilerplate。

索引文件

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

;

主页模板和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' ;
    }
  });
})

;

服务模板＆amp; JS

break

APP JS

if (employeeList[i].getFirstName().startsWith(nameCheck)){
            System.out.println("ID No: " + employeeList[i].getIdNum() + " - "
                               + employeeList[i].getLastName() + " " +
                               employeeList[i].getFirstName());
          break;
}

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

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

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

有人知道怎么做吗？

Answer 1

为什么你不使用原生滚动？ https://github.com/angular-ui/ui-router/wiki/Quick-Reference#autoscroll

Angular ui-router，使用不同的控制器和模板滚动到状态更改的下一步

1 个答案: