Вернуться к текущему состоянию в AngularJS

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); 
     }); 
    } 
}); 

продлить каждый пост с идентификатором недвижимости

<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>