Question

我有一个类似facebook的应用程序，使用codeigniter和angularjs编写。当我单击帖子位于页面底部的帖子的like button时，我总是返回到页面的最上面部分。当我点击那个特定点时，我怎么能做到这一点，我仍然会留在那个区域？

这是代码

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


newsfeed.controller('newsfeedController',function($scope,$http){
 var getPosts = function(){
    $http.get('/status_list/newsfeed_gen').success(function(data){
            $scope.posts = data;
            console.log(data);
    }); 
}
getPosts();

$scope.like = function(id) {
    $http({
            method: "POST",
            url: '/status_list/like/'+ id,
            headers: { 'Content-Type' : 'application/x-www-form-urlencoded' },
            data: $.param(id)
            })
            .success(function(data){
                console.log(data);

                getPosts();

            })
            .error(function(data){
                console.log(data);
            });
}

}）;

==== HTML ====

<div ng-app="newsfeed" ng-controller="newsfeedController">
          <div class="panel panel-default" ng-repeat="post in posts">
            <div class="panel-heading"><a href="#" class="pull-right">View all</a> 
                <a href="<?= base_url('{{post.username}}')?>">
                    <h4><img src="<?= base_url('{{post.profile_pic}}') ?>"/> {{post.fullname}}</h4>
                </a>
                <h6>{{post.date_posted}}</h6>
            </div>
            <div class="panel-body">
                <div ng-show="post.photo != null">
                  <img src="/public/uploads/{{post.photo}}">
                </div>
                    {{post.body}}
                <hr>
              <div class="input-group">
                  <div class="input-group-btn">
                      <button class="btn btn-default" data-ng-click="like(post.id)">{{post.like}} <!-- like counter --><i class="glyphicon glyphicon-thumbs-up"> </i> </button>
                      <button class="btn btn-default">{{post.comment}} <!-- comment counter --><i class="glyphicon glyphicon-comment"></i></button>
                  </div>
                  <input type="text" class="form-control" placeholder="Add a comment..">
              </div>
            </div>
          </div>
</div>

Answer 1

你可以使用anchorScroll滚动到由id：

标识的特定元素

newsfeed.controller('newsfeedController', function($scope, $http, $location, $anchorScroll, $timeout) {
  var getPosts = function() {
    $http.get('/status_list/newsfeed_gen').success(function(data) {
      $scope.posts = data;
      console.log(data);
    });
  }
  getPosts();

  $scope.like = function(id) {
    $http({
      method: "POST",
      url: '/status_list/like/' + id,
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      data: $.param(id)
    })
      .success(function(data) {
        console.log(data);

        $http.get('/status_list/newsfeed_gen').success(function(data) {
          $scope.posts = data;
          // wait for html to render
          $timeout(function() {
            $location.hash('post' + id);
            $anchorScroll();
          });
        });


      })
      .error(function(data) {
        console.log(data);
      });
  }
});

使用id属性

扩展每个帖子

<div class="panel panel-default" ng-repeat="post in posts" id="{{'post' + post.id}}">

备选方案2 ：

另一种解决方案可能只是更新特定帖子：

$scope.like = function(post) {
  var id = post.id;

  $http({
    method: "POST",
    url: '/status_list/like/' + id,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    data: $.param(id)
  })
    .success(function(data) {
        console.log(data);

        $http.get('/status_list/newsfeed_gen').success(function(data) {

            for (var i = 0; i < data.length; i++) {
              var updatedPost = data[i];
              if (updatedPost.id == id) {
                post = updatedPost;
              }
            }

          }

          $scope.posts = data;
          // wait for html to render
          $timeout(function() {
            $location.hash('post' + id);
            $anchorScroll();
          });
        });


  })
  .error(function(data) {
    console.log(data);
  });

HTML：

<button class="btn btn-default" data-ng-click="like(post)">{{post.like}} <!-- like counter --><i class="glyphicon glyphicon-thumbs-up"> </i> </button>

返回AngularJS中的当前状态

1 个答案: