Question

我在尝试使用$interval时收到错误。

错误：未捕获的ReferenceError：$ interval未定义

Plnkr中的示例代码：plnkr

有人可以帮帮我吗。谢谢！

var MyApp = angular.module('MyApp', []);

(function() {
  var MainController = function($scope, $http, $interval) {

    var OnSuccess = function(response) {
      $scope.user = response.data;
      $http.get($scope.user.repos_url).then(OnLoadRepos, OnError)
    };

    var OnLoadRepos = function(response) {
      $scope.repos = response.data;
    };
    var OnError = function(response) {
      $scope.user = "";
      $scope.error = "could not fetch the data.";
    };

    $scope.search = function(username) {
      $http.get("https://api.github.com/users/" + username).then(OnSuccess, OnError);
    };
    $scope.message = "GitHub Viewer!";
    $scope.username = "angular";
    $scope.countdown = 5;
    $scope.repoSortOrder = "-stargazers_count";
  };
  var decrementCountDown = function() {
    $scope.countdown -= 1;
    if ($scope.countdown < -1) {
      $scope.search($scope.username);
    }
  };
  MyApp.controller('MainController', MainController);

  var startCountdown = function() {
    $interval(decrementCountDown, 1000,$scope.countdown);
  };
  startCountdown();
}());

Answer 1

错误：

此处startCountdown函数位于angular的控制器之外所以它是简单的javascript函数。

在Javascript函数中，您使用的是$interval依赖项，因此无法正常工作。

<强>解决方案：

您在控制器中注入$interval还有一件事情是将startCountdown功能转移到控制器中的角度功能中。

var MyApp = angular.module('MyApp', []);

(function() {
  var MainController = function($scope, $http, $interval) {

    var OnSuccess = function(response) {
      $scope.user = response.data;
      $http.get($scope.user.repos_url).then(OnLoadRepos, OnError)
    };

    var OnLoadRepos = function(response) {
      $scope.repos = response.data;
    };
    var OnError = function(response) {
      $scope.user = "";
      $scope.error = "could not fetch the data.";
    };

    $scope.search = function(username) {
      $http.get("https://api.github.com/users/" + username).then(OnSuccess, OnError);
    };
    $scope.message = "GitHub Viewer!";
    $scope.username = "angular";
    $scope.countdown = 5;
    $scope.repoSortOrder = "-stargazers_count";
  };
  var decrementCountDown = function() {
    $scope.countdown -= 1;
    if ($scope.countdown < -1) {
      $scope.search($scope.username);
    }

    $scope.startCountdown = function() {
        $interval(decrementCountDown, 1000,$scope.countdown);
     };
     $scope.startCountdown();
  };
  MyApp.controller('MainController', MainController);

}());

Answer 2

您无法访问控制器外的$ interval或角度范围。

试试这个

var MyApp = angular.module('MyApp', []);

(function() {
  var MainController = function($scope, $http, $interval) {

    var OnSuccess = function(response) {
      $scope.user = response.data;
      $http.get($scope.user.repos_url).then(OnLoadRepos, OnError)
    };

    var OnLoadRepos = function(response) {
      $scope.repos = response.data;
    };
    var OnError = function(response) {
      $scope.user = "";
      $scope.error = "could not fetch the data.";
    };

    $scope.search = function(username) {
      $http.get("https://api.github.com/users/" + username).then(OnSuccess, OnError);
    };
    $scope.message = "GitHub Viewer!";
    $scope.username = "angular";
    $scope.countdown = 5;
    $scope.repoSortOrder = "-stargazers_count";
    $scope.startCountdown = function() {
      $interval($scope.decrementCountDown, 1000,$scope.countdown);
    }
    $scope.decrementCountDown = function() {
      $scope.countdown -= 1;
      if ($scope.countdown < -1) {
        $scope.search($scope.username);
      }
    };
  };
  MyApp.controller('MainController', ['$scope','$http', '$interval', MainController]); //Dependency injection
}());

还要注意依赖注入，这是一种很好的做法。

我在初始化期间调用了startCountDown。

<!DOCTYPE html>
<html ng-app="MyApp">

<head>

   <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body ng-controller="MainController" ng-init="startCountdown()">
  <h1>{{message}}</h1>
  <div>{{error}}</div>
{{countdown}}
<form name="searchUser" ng-submit="search(username)">
 <input type="search" required placeholder="UserName to find" ng-model="username"/>
  <input type="submit" value="Search" />
</form>
<div ng-include="'userdetails.html'" ng-show="user"></div>
</body>

</html>

Angular：$ interval undefined

2 个答案: