$ anchorScroll()没有滚动到所需的元素

时间:2018-03-19 17:39:05

标签: angularjs

我正在尝试使用 $ anchorscroll 在用户点击其移动设备上的搜索按钮时滚动到该元素。

但是,它不会滚动到结果。以下是我的控制器:

var $scope, $location, $anchorScroll;
var indexApp = angular.module('indexApp',['ui.bootstrap', 'ngSanitize']);

indexApp.controller('IndexController',function($scope,$http,$location,$anchorScroll,anchorSmoothScroll){

以下部分确定是否显示结果或错误。在该范围内,我将锚定滚动放置在检查提供者是否在系统中的位置:

$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.has('bottom');

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

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

这里是显示结果的地方,以及我调用锚点滚动到哪个不执行的地方:

<cfoutput>
<cfinclude template="inc/html_head_Hospital.cfm" />
<body id="#$.getTopID()#" class="depth-#$.content('depth')# #$.createCSSHook($.content('menuTitle'))#">
    <cfinclude template="inc/navbar.cfm" />
    <div id="resizable-section" ng-app="indexApp">
        <div class="container-fluid finder-padding" ng-controller='IndexController'>
            <div class="row">
                <aside class="col-lg-3 col-lg-offset-1 col-md-4 col-sm-4 col-xs-12 sidebar">
                    #$.dspObjects(1)#
                </aside><!-- /.span -->
                <section class="col-lg-7 col-md-8 col-sm-8 col-xs-12 no-padding-right content">
                    <div ng-show="ShowDesc">
                        <cfinclude template="inc/breadcrumb.cfm" />
                        #$.dspBody(
                            body=$.content('body')
                            <!---, pageTitle=$.content('title')--->
                            , crumbList=false
                            , showMetaImage=true
                            , metaImageClass='thumbnail'
                        )#
                    </div>
                    <a id="SearchResultsAnchor">&nbsp;</a>
                    <div ng-show="ShowDesc" class="content">
                        #$.dspObjects(2)#
                    </div>
                    <a id="ResultsAnchor">&nbsp;</a>
                    <div ng-show="ShowResults" class="content">
                        #$.dspObjects(3)#
                    </div>
                    <a id="bottom">&nbsp;</a>
                    <div ng-show="NoResults">
                        #$.dspObject('component','No Results - Hospital Finder')#
                    </div>
                </section>
            </div><!--- /.row --->
            <cfinclude template="inc/footer.cfm" />
        </div><!--- /.container --->
    <cfinclude template="inc/html_foot.cfm" />
</div>

任何帮助都将不胜感激。

0 个答案:

没有答案