Question

我正在使用带有Bootstrap的AngularUI路由器。我在同一个状态下有两个视图，并且想要在单击按钮时滚动到第二个视图。当初始状态和视图加载时，我不需要进行任何滚动。我希望在单击“添加更多”按钮时页面滚动到#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 for Controller：

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 即可。您将$scope注入控制器ProjectListCtrl内。然后在同一个控制器中定义$scope.gotoBottom函数。

范围是控制器和视图之间的粘合剂。如果要从视图中调用控制器功能，则需要使用$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视图中，您可以使用$scope.gotoBottom调用gotoBottom()函数：ng-click="gotoBottom()"

<强> 2 即可。或者您使用 控制器作为 表示法，就像您编写ProjectListCtrl as projectList时一样。

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

使用此表示法，您在this.gotoBottomWithoutScope中编写ProjectListCtrl。但在视图中，您必须将其称为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

是否可以在Angular UI路由器中自动滚动而不更改状态？

1 个答案: