Angular JS TypeError: f не является функцией

Я пытаюсь выяснить, почему моя функция таймаута дает ошибку, тем самым ограничивая изменение значения модели.

angularExample.html

<!DOCTYPE html>
<html ng-app="Tutorial">
  <head>
    <link rel="stylesheet" href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'; return false;">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script type="text/javascript" src="scripts/app.js"></script>
  </head>
<body ng-controller="MyController">  
     <input type="text" ng-model="data" />
</body>
</html>

app.js

(function() {

  var app = angular.module('Tutorial', []);
app.controller("MyController",function($scope,$timeout){

    $scope.data="hi";
    $timeout(callAtTimeout,3000);

    var callAtTimeout=function(){$scope.data="hello";}
});
})();

Снимок с ошибкой:

Ответ 1

Сначала вам нужно определить callAtTimeout, затем использовать его.

var callAtTimeout=function(){console.log("hi")}
$timeout(callAtTimeout,3000);

Инициализация в Javascript не hoisted.

Ответ 2

Вам просто нужно переупорядочить порядок вашего кода, определение функции callAtTimeout должно быть до его использования. Рабочий пример:

(function() {

  var app = angular.module('Tutorial', []);
app.controller("MyController",function($scope,$timeout){

    var callAtTimeout=function(){$scope.data="hello";}
    
    $scope.data="hi";
    $timeout(callAtTimeout,3000);

   
});
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="Tutorial" ng-controller="MyController">  
     <input type="text" ng-model="data" />
</body>

Ответ 3

Вы определяете функцию callAtTimeout после ее вызова. Вы должны иметь это над ним.

Рабочая скрипка

Пример кода:

(function () {

    var app = angular.module('Tutorial', []);
    app.controller("MyController", function ($scope, $timeout) {

        var callAtTimeout = function () {
            $scope.data = "hello";
        }
        $scope.data = "hi";
        $timeout(callAtTimeout, 3000);


 }); })();

Ответ 4

Определяющие функции, такие как var callAtTimeout = function() { ... }, выполняются во время выполнения, а не во время компиляции (тогда как определяющие функции, такие как function callAtTimeout() { ... }, находятся во время компиляции).

Из-за этого callAtTimeout еще не определен в строке:

$timeout(callAtTimeout,3000);

Переместите объявление callAtTimeout над этой строкой или измените его на function callAtTimeout() { ... }

Ответ 5

Ошибка также может возникнуть, когда две или более зависимостей не на месте. Я знаю, что ответ немного не по теме, но чтение этого может кому-то помочь.

    (function() {
'use strict';

angular
    .module('app')
    .controller('myController', myController);

myController.$inject = ['dependency1','dependency2','dependency3'];
/* @ngInject */
function myController(dependency1, dependency3, dependency2){

    // will trigger the error    because dependency 2 && 3 are misplaced
    var v = dependency2.somefunction(arg1,arg2,...);
    // sometimes it can be difficult to see at the first look
    // especially when you have many dependencies
}
})();

Ответ 6

Я потратил много времени, пытаясь это исправить. Это была внутренняя ошибка в моем случае. Вы просто должны

сломать угловой CLI (Ctrl + c) и

беги (нг служи) снова.

Затем он начал распознавать все мои новые определенные функции.

Ответ 7

Вам нужно определить callAtTimeout, затем использовать его.