Tester
Tester

Reputation: 808

AngularJS directive $http is not defined

I'm using angular js to load data into the table when scrolling to the bottom of the div.

I got $http is not defined error. Please help to check where to inject the $http?

html

    <div class="bs-component" ng-app="myApp" ng-controller="customersCtrl" style="max-height: 400px;overflow-y: scroll;" scrolly="showMore()">
        <div class="row">
            <table class="table table-striped table-hover" id="news_table" >
                 <tr ng-repeat="x in names">
                    <td>@{{ x.title }}</td>
                    <td><a href="@{{x.url}}" target="_blank">@{{ x.title }}</a></td>                       
                  </tr>
            </table>
        </div>
    </div>

Javascript

var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
        $http.get("/news")
        .then(function (response) {$scope.names = response.data;});
    });

    app.directive('scrolly', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                //console.log(element);
                var raw = element[0];
                console.log('loading directive');

                element.bind('scroll', function () {
                    // console.log("raw.scrollTop + raw.offsetHeight : "+(raw.scrollTop + raw.offsetHeight));
                    // console.log("raw.scrollHeight is " + raw.scrollHeight);
                    if (raw.scrollTop + raw.offsetHeight == raw.scrollHeight) {
                        console.log("I am at the bottom");
                        // scope.$apply(attrs.scrolly);
                        $http.get("/news")
                        .then(function (response) {
                            $scope.names.push(response.data);
                        });
                    }
                });
            }
        };
    });

Upvotes: 0

Views: 851

Answers (2)

ferhado
ferhado

Reputation: 2594

This Directive will call the Function which in attr scrolly when the scroll ends, you can write your function in controller.

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("/news").then(function (response) {$scope.names = response.data;});
  $scope.showMore=function(){
    $http.get("/news").then(function (response) {$scope.names.concat(response.data);});
  };
});

app.directive('scrolly', function() {
  return {
      restrict: "A",
      link: function(scope, elm, attr) {
        var raw = elm[0];
        raw.addEventListener('scroll', function() {
        if ((raw.scrollTop + raw.clientHeight) >= (raw.scrollHeight )) {
          scope.$apply(attr.scrolly);
        }
      });
    }
  };
})

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222532

Pass $http to the function of the directive . Also , use scope inside the link function instead of $scope

  app.directive('scrolly', function ($http) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                //console.log(element);
                var raw = element[0];
                console.log('loading directive');

                element.bind('scroll', function () {
                    // console.log("raw.scrollTop + raw.offsetHeight : "+(raw.scrollTop + raw.offsetHeight));
                    // console.log("raw.scrollHeight is " + raw.scrollHeight);
                    if (raw.scrollTop + raw.offsetHeight == raw.scrollHeight) {
                        console.log("I am at the bottom");
                        // scope.$apply(attrs.scrolly);
                        $http.get("/news")
                        .then(function (response) {
                            scope.names.push(response.data);
                        });
                    }
                });
            }
        };
    });

Upvotes: 3

Related Questions