如果ng-model为真AngularJS，则滚动到元素ID

Question

我有一个显示列表的页面（搜索输入的结果）。

我正在使用ng-model来捕获输入文字：ng-model="search_text"。

每次模型都有东西时，我想自动滚动到包含列表的div。如果它是空的，它应该什么也不做，但是如果在search_text中写了一些内容，它应该可以解决问题并自动向下滚动到列表结果。

Answer 1

您可以使用像 demo fiddle 这样的简单指令来实现这一目标。它使用$anchorScroll()来实现自动滚动功能。

视图

<div ng-controller="MyCtrl">
  <input ng-model="searchText" type="text">
  <div id="list" auto-scroller id-to-scroll-to="'list'" trigger="searchText">
     My List
  </div>
</div>

AngularJS应用程序/指令

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope) {});

myApp.directive('autoScroller', function ($location, $anchorScroll, $timeout) {
    return {
      restrit: 'A',
      scope: {
        trigger: '=',
        idToScrollTo: '='
      },
      link: function (scope, element, attrs) {
        scope.$watch('trigger', function (newValue, oldValue) {
          if (newValue && newValue !== oldValue) {
            $timeout(function () {
              $location.hash(scope.idToScrollTo);
              $anchorScroll();
            });
          }
        });
      }
    }
});