用AngularJS搜索Flickr，结果不允许我一直滚动到顶部

Flickr Search with AngularJS, results won't let me scroll all the way to the top

本文关键字：一直 允许我 滚动 顶部 不允许 结果 AngularJS 搜索 Flickr      更新时间：2023-09-26

我正在使用AngularJS (https://www.youtube.com/watch?v=lvGAgul5QT4)构建Flickr搜索应用程序的教程。我可以在页面上显示结果，但遇到了一个问题:在显示了所有结果之后，我无法一直滚动到搜索栏的顶部来进行另一次搜索。怎样才能解决这个问题?提前感谢!

代码如下:index.js 

<!doctype html>
<html lang="en">

Flickr搜索

<md-toolbar>
    <div class="md-toolbar-tools">
        <span class="md-flex">Flickr Search</span>
    </div>
</md-toolbar>
<md-content layout="column" layout-align="center center">
    <div class="app-content">
        <form ng-submit="search()" >
            <div ng-show="!isSearching">
                <md-input-container class="long" flex>
                    <label>Search for</label>
                    <input ng-model="searchTerm">
                </md-input-container>
            </div>
        </form>
        <div ng-if="isSearching">
            <md-progress-circular md-theme="blue" md-mode="indeterminate"></md-progress-circular>
        </div>
        <div id="result">
            <md-card ng-repeat="picture in results.photos.photo | limitTo:2">
                <img ng-src="https://farm{{picture.farm}}.staticflickr.com/{{picture.server}}/{{picture.id}}_{{picture.secret}}_b.jpg" alt="" class="md-card-image">         
                <h3>{{ picture.title }}</h3>
            </md-card>
        </div>
    </div>
</md-content>

<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/hammerjs/hammer.min.js"></script>
<script src="bower_components/angular-material/angular-material.min.js"></script>
<script src="app.js"></script>

app.js 

    (function(){
    'use strict';
    angular.module('flickrApp',['ngMaterial'])
    .config(['$mdThemingProvider', function($mdThemingProvider){
        $mdThemingProvider.theme('blue')  
        .primaryPalette('pink')
        .accentPalette('orange');
    }])
    .controller('ListController',['$scope','$http',function($scope,$http){
        $scope.isSearching = false;
        $scope.results = [];
        $scope.search = function(){
            $scope.isSearching = true;
            $http({
                method: 'GET',
                url: 'https://api.flickr.com/services/rest',
                params: {
                    method: 'flickr.photos.search',
                    api_key: 'e232c1eade905d440cbdf4e176c828c7',
                    text: $scope.searchTerm,
                    format: 'json',
                    nojsoncallback: 1
                }
            })
            .success(function(data){
                console.log(data);
                $scope.results = data;
                $scope.isSearching = false;
            })
            .error(function(error){
                $scope.isSearching = false;
                console.log(error); 
            });
        }
    }])
})();

style.css 

    .app-content{
    width: 100%;   
}
form{
    padding: 10px 30px 20px 25px;   
}
md-input-container > input{
    width: 100%;    
}
md-card{
    margin: 0 30px 25px 30px;
}

要在angular中滚动到指定位置，我们可以使用location服务和anchorscroll服务。

在你想滚动的位置添加Id。

样本html 

<div id="scrollto">
//text
</div>

angular中的示例脚本

$location.hash(scrollto);
$anchorScroll();

这将添加scrollto作为URL的参数，它将滚动到该位置

尝试以下最近的教程:https://www.youtube.com/watch?v=jp-c6_pxAns你应该能够在页面的任何地方滚动

相关文章：