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

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：

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 函数。

范围是控制器和视图之间的粘合剂。如果你想从你的视图中调用一个控制器函数，你需要用$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