How do I use ng infinite scroll and update another DOM element when the http.jsonp is done?

Question!

This is my code.

var fetchMyWorks = angular.module('fetchMyWorks', ['infinite-scroll']);

var bookContainerHeight = 341;
var bookContainerWidth = 180;
var gapBetweenEachColumn = 13;
var gapBetweenEachRow = 13;
var initial = 46; // height from top
var defaultHeight = 662;

fetchMyWorks.controller('StoriesController', function($scope, MyWorks) {
  $scope.my_works = new MyWorks();
  $scope.row_gap_style = function(n) {
    if (n == 0) {
      rowGapStyle = "top: " + initial  + "px;";
    } else {
      rowGapStyle = "top: " + ((bookContainerHeight + gapBetweenEachRow) * n) + "px;";
    }
    return rowGapStyle;
  };
  $scope.col_gap_style = function(index) {
    colGapStyle = "left: 0px;"; 
    if (index % 3 == 1) {
      colGapStyle = "left: " + (bookContainerWidth + gapBetweenEachRow) + "px;";
    }
    if (index % 3 == 2) {
      colGapStyle = "left: " + ((bookContainerWidth + gapBetweenEachRow) * 2) + "px;";
    }
    return colGapStyle;
  };
  $scope.fetch_s3_cover = function(s3_url_prefix, item) {
    cover = item.Cover.filename;
    if (cover !== null) {
      coverUrl = s3_url_prefix + 'files/story_file/filename/' + item.Cover.id + '/' + cover;
      return "width:180px; height: 254px; top:0px; left:0px; background: url('" + coverUrl + "') no-repeat; background-size: cover; border: 1px solid #DCDDDE;"
    }
    return '';
  };
  $scope.update_height = function() {
    return "height: " + defaultHeight + "px;";
    if ($scope.my_works.page > 1) {
      var newHeight = defaultHeight + (($scope.my_works.page - 1) * 308)
      return  "height: " + newHeight + "px;";
    }
  };
});

// MyWorks constructor function to encapsulate HTTP and pagination logic
fetchMyWorks.factory('MyWorks', function($http) {
  var MyWorks = function() {
    this.items = [];
    this.busy = false;
    this.page = 1;
    this.after = '';
    this.perPage = 6;
    this.maxLimit = 100;
  };

  MyWorks.prototype.nextPage = function() {
    if (this.busy) return;
    this.busy = true;
    var url = "/my_works.json?page=" + this.page + "&top=" + this.perPage + "&callback=JSON_CALLBACK";
    $http.defaults.headers.jsonp = { 'Accept' : 'application/json', 'Content-Type' : 'application/json' };
    $http.jsonp(url).success(function(data, status, headers, config) {
      var items = data.stories;
      this.maxLimit = data.paging.count;
      for (var i = 0; i < items.length; i++) {
        if (this.items.length < this.maxLimit) {
          this.items.push(items[i]);
        }
      }
      this.page = parseInt(this.items.length / this.perPage) + 1;
      this.busy = false;
    }.bind(this));
  };

  return MyWorks;
});

fetchMyWorks.filter('range', function() {
  return function (input, total) {
    total = parseInt(total);
    for (var i = 0; i < total; i++) {
      input.push(i);
    }
    return input;
  }
});

I am using nginfinite-scroll from http://binarymuse.github.io/ngInfiniteScroll/index.html

I want to change the height of another DOM element whenever the latest data is fetched.

i want to avoid using jQuery. Is there a way to do that using angularjs?



Answers
U should do something like this.

$http.jsonp(url).success(function(data, status, headers, config) {
       if(!data) {
         var element = document.querySelectorAll('#dom-id')[0];
         element.style.hiegth = "300px";
       }
   });


This video can help you solving your question :)
By: admin