CODEWITHSUNDEEP
javascriptangularjs
Ajay
Ajay

Reputation: 653

Angular JS TypeError: f is not a function

I'm trying to figure out as to why my timeout function is giving error, thereby restricting the change in model value.

angularExample.html

<!DOCTYPE html>
<html ng-app="Tutorial">
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <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";}
});
})();

Error Snapshot: enter image description here

Upvotes: 16

Views: 67934

Answers (7)

antares667367
antares667367

Reputation: 91

The error can also occur when two or more dependencies are misplaced. I know the answer is kinda off topic but reading this might help someone.

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

Upvotes: 1

shaheer shukur
shaheer shukur

Reputation: 1167

I had spend a lot of time trying to fix it. It was an internal error in my case. You just have to

break the Angular CLI (Ctrl + c) and

run (ng serve) again.

It then started recognizing all my newly defined functions.

Upvotes: 0

V31
V31

Reputation: 7666

You are defining the callAtTimeout function after it its call. You need to have it above it.

Working fiddle

Sample code:

(function () {

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

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


 }); })();

Upvotes: 2

Donal
Donal

Reputation: 32713

You just need to re-arrange the order of your code, the definition for callAtTimeout function should be before you use it. Working example:

(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>

Upvotes: 2

Tom
Tom

Reputation: 7740

Defining functions such as var callAtTimeout = function() { ... } happens at run time, not at compile time (whereas defining functions such as function callAtTimeout() { ... } is at compile time).

Because of this, callAtTimeout is not yet defined on the line:

$timeout(callAtTimeout,3000);

Either move the declaration of callAtTimeout above that line, or change it to function callAtTimeout() { ... }

Upvotes: 1

Oam Psy
Oam Psy

Reputation: 8663

You need to define callAtTimeout then use it.

Upvotes: -1

Zee
Zee

Reputation: 8488

You need to define callAtTimeout first then use it.

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

Initializations in Javascript are not hoisted.

Upvotes: 15

Related Questions