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

Variable coming back undefined into the same scope in AngularJS

本文关键字:范围 返回 变量 未定义 AngularJS      更新时间:2023-09-26

给定以下代码,我发现一旦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);
      }
    };
  }
]);

r所以从我读到的内容来看,我理解你的问题,因为在loadDetails()中,id参数是未定义的。loadDetails()是从哪里调用的?我认为这是从观点上说的。在调用此参数时,是否将其传入?例如:

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

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