AngularJS directive $http is not defined

Question

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

Sajeetharan · Accepted Answer · 2017-10-22 20:06:00Z

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

Thanks. I added the $http to the directive. I got $scope not defined error. I tried to add $cope into the function of directive. app.directive('scrolly', function ($scope, $http) { I got angular-1.0.1.js:5526 Error: Unknown provider: $scopeProvider <- $scope <- scrollyDirective
$scope can only be injected to link functions, just remove it from the dependencies and change $scope to scope
Any book/tutorial recommendation for AngularJS newcomers? I'm familiar with Jquery and javascript. Thanks!

ferhado · Accepted Answer · 2017-10-22 20:13:25Z

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

Collectives™ on Stack Overflow

AngularJS directive $http is not defined

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related