Question

鉴于以下代码，我发现一旦loadDetails函数（最后一个）被触发，ID变量就会返回未定义，因为其他函数正在正确返回。

我错过了什么吗？

function Ctrl($scope, $http) {
  var search = function(name) {
    if (name) {
      $http.get('http://api.discogs.com/database/search?type=artist&q='+ name +'&page=1&per_page=7', {ignoreLoadingBar: true}).
        success(function(data3) {
          $scope.clicked = false;
          $scope.results = data3.results;
        });
    }
    $scope.reset = function () {
      $scope.sliding = false;
      $scope.name = undefined;
    }
  }
  $scope.$watch('name', search, true);

  $scope.getDetails = function (id) {
    $http.get('http://api.discogs.com/artists/' + id).
      success(function(data) {
          $scope.artist = data;
      });
    $http.get('http://api.discogs.com/artists/' + id + '/releases?page=1&per_page=8').
      success(function(data2) {
          $scope.releases = data2.releases;
    });  

    $scope.$watch(function() {
      return $scope.artist;
    }, function() {
      var pos = $scope.artist.name.toLowerCase().indexOf(', the');
      if (pos != -1) {
        $scope.artist.name = 'The ' + $scope.artist.name.slice(0, pos);
      }
    });

    var _page = 0;
    $scope.releases = [];
    $scope.loadDetails = function(id) {
        _page++;
        console.log(_page);
        $http.get('http://api.discogs.com/artists/' + id + '/releases?page=' + _page + '&per_page=12').then(function(data2) {
            $scope.releases = data2.releases;
        });
    };    

    $scope.clicked = true;
    $scope.sliding = true;
  }

编辑：这是我的观看代码：

<div class="infinite" infinite-scroll="loadDetails(artist.id)"> 
  <div class="col-xs-3 col-md-3 release" ng-controller="ImageCtrl" release="release" ng-repeat="release in releases | filter:album | filter:year" the-directive position="{{ $index + 1 }}" last="{{ $last }}">
      <img class="img-responsive" ng-src="{{image}}"/> {{release.title | characters:45}}
  </div>
  <div style='clear: both;'></div>
</div>

当包含div到达底部时触发函数的ng-Infinite-Scroll脚本：

/* ng-infinite-scroll - v1.0.0 - 2013-02-23 */
var mod;

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

mod.directive('infiniteScroll', [
  '$rootScope', '$window', '$timeout', function($rootScope, $window, $timeout) {
    return {
      link: function(scope, elem, attrs) {
        var checkWhenEnabled, handler, scrollDistance, scrollEnabled;
        $window = angular.element($window);
        scrollDistance = 0;
        if (attrs.infiniteScrollDistance != null) {
          scope.$watch(attrs.infiniteScrollDistance, function(value) {
            return scrollDistance = parseInt(value, 10);
          });
        }
        scrollEnabled = true;
        checkWhenEnabled = false;
        if (attrs.infiniteScrollDisabled != null) {
          scope.$watch(attrs.infiniteScrollDisabled, function(value) {
            scrollEnabled = !value;
            if (scrollEnabled && checkWhenEnabled) {
              checkWhenEnabled = false;
              return handler();
            }
          });
        }
        handler = function() {
          var elementBottom, remaining, shouldScroll, windowBottom;
          windowBottom = $window.height() + $window.scrollTop();
          elementBottom = elem.offset().top + elem.height();
          remaining = elementBottom - windowBottom;
          shouldScroll = remaining <= $window.height() * scrollDistance;
          if (shouldScroll && scrollEnabled) {
            if ($rootScope.$$phase) {
              return scope.$eval(attrs.infiniteScroll);
            } else {
              return scope.$apply(attrs.infiniteScroll);
            }
          } else if (shouldScroll) {
            return checkWhenEnabled = true;
          }
        };
        $window.on('scroll', handler);
        scope.$on('$destroy', function() {
          return $window.off('scroll', handler);
        });
        return $timeout((function() {
          if (attrs.infiniteScrollImmediateCheck) {
            if (scope.$eval(attrs.infiniteScrollImmediateCheck)) {
              return handler();
            }
          } else {
            return handler();
          }
        }), 0);
      }
    };
  }
]);

Answer 1

从我读到的内容中我理解你的问题，因为在loadDetails（）中，id参数是未定义的。 loadDetails（）从哪里调用？我假设从视图中调用它。你在调用它时是否通过了这个参数？例如：

<button ng-click="loadDetails('myId')">Load Details</button>

我想说你的问题是你没有将param传递给这个函数。如果您发布了与此控制器关联的视图，将会很有帮助。

变量返回未定义到AngularJS中的相同范围

1 个答案: