AngularJS Direktive $ http ist nicht definiert

Question

Ich benutze angular js, um Daten in die Tabelle zu laden, wenn ich zum Ende des div scrollte.

Ich habe $http is not defined Fehler erhalten. Bitte helfen Sie zu überprüfen, wo die $ http injizieren?

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

Answer 1

Pass $http auf die Funktion des directive. Verwenden Sie außerdem Umfang innerhalb der Link-Funktion anstelle von $ 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); 
         }); 
        } 
       }); 
      } 
     }; 
    }); 

Answer 2

Diese Richtlinie wird die Funktion aufrufen, die in attr scrolly wenn die Scroll endet, können Sie Ihre Funktion in der Steuerung schreiben.

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