是否可以在不更改状态的情况下在 AngularUI 路由器中自动滚动？

Question

我在 Bootstrap 中使用 AngularUI 路由器。我在同一状态下有两个视图，并希望在单击按钮时滚动到第二个视图。当初始状态和视图加载时，我不需要做任何滚动。单击 "Add More" 按钮时，我希望页面滚动到#start。我试图使用 $anchorScroll 来完成这个，但我没有任何运气。

关于实现此目的的好方法有什么建议吗？

HTML:

<!-- index.html -->

<div ui-view="list"></div>
<div ui-view="selectionlist"></div>

<!-- list.html -->

 <div id="scrollArea"><a ng-click="gotoBottom()" class="btn btn-danger btn-lg" role="button">Add More</a>

<!-- selectionlist.html -->

<div class="row" id="start"></div>

Javascript 控制器：

myApp.controller('SelectionListCtrl', function (Selections, $location, $anchorScroll) {
    var selectionList = this;
    selectionList.selections = Selections;
    this.selectedServices = Selections;
    selectionList.gotoBottom = function() {

     $location.hash('start');
     $anchorScroll();
     };
  });

Javascript 路线：

myApp.config(function ($stateProvider, $urlRouterProvider, $uiViewScrollProvider) {
    $uiViewScrollProvider.useAnchorScroll();

    $urlRouterProvider.otherwise('/');

    $stateProvider

      .state('selection', {
              url: '/selection',
              views: {
                  'list': {
                      templateUrl: 'views/list.html',
                      controller: 'ProjectListCtrl as projectList'
                  },
                  'selectionlist': {
                      templateUrl: 'views/selectionlist.html',
                      controller: 'SelectionListCtrl as selectionList'

                  }
              }
              })

Answer 1

是，可以在不改变状态的情况下在 AngularUI 路由器中自动滚动。

正如我之前在评论中提到的，您需要使用 ng-click="gotoBottom()" 而不是 ng-click="gotoSection()"

来调用滚动功能

此外，函数定义 gotoBottom() 必须在 ProjectListCtrl 中，而不是在 SelectionListCtrl 中。这是因为调用 gotoBottom() 发生在列表视图中：

'list': {
templateUrl: 'list.html',
controller: 'ProjectListCtrl as projectList'
}

由于 gotoBottom() 是从 list.html 视图中调用的，因此 $stateProvider 中的相应控制器必须是您定义 gotoBottom().

的控制器

以下是实现目标的两种工作方式：

1。您在控制器 ProjectListCtrl 中注入 $scope。然后在同一控制器中定义 $scope.gotoBottom 函数。

The scope is the glue between the controller and the view. If you want to call a controller function from your view, you need to define the controller function with $scope

app.controller('ProjectListCtrl', function ($location, $anchorScroll,$scope) {
var selectionList = this;
//selectionList.selections = Selections;
//this.selectedServices = Selections;
$scope.gotoBottom = function() {
  console.log("go to bottom");
  $location.hash('start');
  $anchorScroll();
 };
});

在 list.html 视图中，您可以使用 gotoBottom() 调用 $scope.gotoBottom 函数：ng-click="gotoBottom()"

2。或者你使用 controller as 表示法，就像你写 ProjectListCtrl as projectList.

    this.gotoBottomWithoutScope = function(){
      $location.hash('start');
      $anchorScroll();
    };

用这个符号，你在ProjectListCtrl中写this.gotoBottomWithoutScope。但在视图中，您必须将其引用为 projectList.gotoBottomWithoutScope().

请找一位working plunker

要了解有关 this 和 $scope 符号的更多信息，请阅读：

Angular: Should I use this or $scope

这个：AngularJS: "Controller as" or "$scope"?

还有这个：Digging into Angular’s “Controller as” syntax

是否可以在不更改状态的情况下在 AngularUI 路由器中自动滚动？

Is it possible to autoscroll in AngularUI Router without changing states?

twitter-bootstrap

angularjs

angular-ui-router