如何仅在检测到移动设备时启用AngularJS的$anchorScroll

当然可以实现这个需求！我们只需要在调用$anchorScroll之前，先判断当前设备是否为移动设备，再决定是否执行滚动逻辑。下面是具体的实现步骤和代码示例：

步骤1：注入必要的服务 #

首先，确保你的控制器已经注入了$window（用于获取设备/浏览器信息）和$anchorScroll服务：

// 假设你的控制器是这样定义的，记得添加上$window和$anchorScroll的依赖注入
angular.module('yourApp').controller('YourSearchController', [
  '$scope', 
  '$window', 
  '$anchorScroll', 
  function($scope, $window, $anchorScroll) {
    // 你的现有代码逻辑
  }
]);

步骤2：添加移动设备检测逻辑 #

在你的SearchProvider函数中，加入移动设备检测的判断。这里提供两种常用的检测方式，你可以根据需求选择：

方式一：通过User-Agent检测（常用） #

利用浏览器的navigator.userAgent属性匹配常见的移动设备标识：

$scope.SearchProvider = function(searchParam){ 
  try{ 
    $scope.searchMode = 1; 
    var queryString=''; 
    if($scope.formModel && $scope.formModel !== searchParam){ 
      // ... 你的其他业务逻辑（比如处理queryString、请求数据等）

      // 检测是否为移动设备
      const isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test($window.navigator.userAgent);

      // 仅在移动设备上执行$anchorScroll
      if(isMobileDevice) {
        $anchorScroll();
      }
    }
  } catch(err) {
    // 这里可以添加错误处理逻辑
    console.error('搜索过程中出现错误:', err);
  }
};

方式二：通过屏幕宽度检测（更精准适配响应式） #

如果你的应用是响应式设计，也可以通过屏幕宽度来判断是否为移动设备（比如把屏幕宽度小于768px视为移动设备）：

$scope.SearchProvider = function(searchParam){ 
  try{ 
    $scope.searchMode = 1; 
    var queryString=''; 
    if($scope.formModel && $scope.formModel !== searchParam){ 
      // ... 你的其他业务逻辑

      // 检测屏幕宽度是否小于768px（可根据你的响应式断点调整）
      const isMobileDevice = $window.innerWidth < 768;

      if(isMobileDevice) {
        $anchorScroll();
      }
    }
  } catch(err) {
    console.error('搜索过程中出现错误:', err);
  }
};

额外提示 #

• 如果你的应用多个地方都需要检测移动设备，可以把检测逻辑封装成一个自定义服务，这样可以复用代码，避免重复编写。
• 注意$anchorScroll的默认行为是滚动到$location.hash()指定的锚点，如果你的逻辑需要滚动到特定元素，记得先设置好$location.hash()或者使用$anchorScroll('#targetElement')指定目标。

内容的提问来源于stack exchange，提问作者Roberto Flores