Угловой: $ interval undefined

Question

Я получаю ошибку при попытке использовать $interval.

Error: Uncaught ReferenceError: $interval is not defined

Пример кода в 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

Это связано с тем, что вы пытаетесь получить доступ к Угловым конкретным службам за пределами угловой области.

С быстрого просмотра кажется, что вы хотите начать обратный отсчет, как только загрузится файл. Ну, вы можете сделать это, включив код в сам контроллер.

Вашего обновленный код выглядит this:

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

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

      $interval(decrementCountDown, 1000, $scope.countdown); 

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


    }()); 

Answer 2

Ошибка:

Здесь ваша startCountdown функция находится вне контроллера угловых в так просто Javascript функция.

В функции Javascript вы используете зависимость $interval, чтобы она не работала.

Решение:

Еще одна вещь, которую вы вводили $interval в контроллер так, передавая ваши startCountdown functuion в угловой функции в контроллере будет работать.

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 3

Ваш не может получить доступ к $ интервала вне контроллера или досягаемостей угловых х.

Попробуйте

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>