Question

我是angularjs的新手，我能够让anchorScroll工作。

但我确实有一个问题：是否可以在检测到移动设备时仅应用anchorScroll。如果是这样，我将如何将其应用于我的控制器？

我的控制器的以下部分是我显示结果的位置以及应用anchorScroll的位置：

$scope.SearchProvider = function(searchParam){
        try{
            $scope.searchMode = 1;
            var queryString='';
            if($scope.formModel && $scope.formModel !== searchParam){
                $scope.resultsCount = 0;
                currentPage = 1;
            }
            if(searchParam){
                $scope.formModel = searchParam;
                for(var param in searchParam){
                    if(searchParam.hasOwnProperty(param)){
                        var paramValue = searchParam[param].value ? searchParam[param].value.trim() : searchParam[param].trim();
                        if (paramValue.length > 0)
                            queryString += param + '=' + paramValue + '&';
                    }
                }
            }
            //debugger;
            console.log(queryString);
            queryString= '?' + queryString + 'currentpage=' + $scope.currentPage;

            $http.get("/includes/ReturnProvidersList.cfm" + queryString)
            .then(function(response){
                $scope.providers = response.data.provider;
                $scope.resultsCount = response.data.rowCount;
                if (!$scope.providers){
                        $scope.NoResults = true;
                        $scope.ShowResults = false;
                        $scope.ShowDesc = false;
                        $location.hash('error');

                        // call $anchorScroll()
                        $anchorScroll('error');
                    }
                else if($scope.providers){
                        $scope.NoResults = false;
                        $scope.ShowResults = true;
                        $scope.ShowDesc = false;
                        $location.hash('ResultsAnchor');

                        // call $anchorScroll()
                        $anchorScroll('ResultsAnchor');
                    }
                else{
                        $scope.NoResults = false;
                        $scope.ShowResults = false;
                        $scope.ShowDesc = true;
                        $location.hash('noScroll');

                        // call $anchorScroll()
                        $anchorScroll('noScroll');
                }
            })
        }
        catch(err){ alert('No response.: ' + err.message); }
    }

**更新：**以下是我根据@BShaps建议所做的事情。但是，它仍在台式机/笔记本电脑浏览器上检测到：

    $scope.providers = response.data.provider;
    $scope.resultsCount = response.data.rowCount;
        if (!$scope.providers){
                $scope.NoResults = true;
                $scope.ShowResults = false;
                $scope.ShowDesc = false;
                $location.hash('bottom');

            if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) 
                            || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) 
                            || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i)){
                // call $anchorScroll()
                $anchorScroll('bottom');
            }
        }
        else {
                $scope.NoResults = false;
                $scope.ShowResults = true;
                $scope.ShowDesc = false;
                $location.hash('ResultsAnchor');
                if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) 
                            || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) 
                            || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i)){                            
                    // call $anchorScroll()
                    $anchorScroll('ResultsAnchor');}
                }

Answer 1

您可以使用第三方AngularJS库，例如ngDeviceDetector。这里有一篇非常好的文章描述它：https://ciphertrick.com/2015/09/21/detect-os-browser-and-device-in-angularjs/。

在控制器中注入deviceDetector后，只需将$ anchorScroll调用包装在if语句中，该语句的条件基于deviceDetector JSON对象的属性。

Answer 2

我在我的一些代码中运行此检查：

if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) 
|| navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) 
|| navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i))

不需要插件，但列表可能不完整。如果你将$ anchorScroll包装在if语句中，你应该没问题。

如何在检测到移动浏览器/设备时仅应用$ anchorScroll

2 个答案: