Question

当滚动到div的底部时，我正在使用角度js将数据加载到表中。

我遇到$http is not defined错误。请帮忙检查注入$ 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);
                        });
                    }
                });
            }
        };
    });

Answer 1

将 $http 传递给 directive 的功能。另外，在link函数中使用scope而不是$ 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

该指令将调用函数，在attr scrolly滚动结束时，您可以在控制器中编写函数。

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

AngularJS指令$ http未定义

2 个答案: