2015-06-03 3 views
10

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

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

Снимок Ошибка: enter image description here

ответ

10

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

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

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

-1

Необходимо определить callAtTimeout, а затем использовать его.

1

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

Из-за этого, callAtTimeout еще не определен на линии:

$timeout(callAtTimeout,3000); 

Либо переместить декларацию callAtTimeout выше этой линии, или изменить его на function callAtTimeout() { ... }

+1

Функции определяются как анонимная функция, но она не присваивается переменной 'callAtTimeout', пока не достигнут строки' уага callAtTimeout = функция() {...} '. Если вы определяете именованную функцию, она будет доступна в первой строке в области ('function myName() {...}'). – andlrc

+0

То же самое относится к переменным: 'var a = b + 1; var b = 0; 'Обе переменные' a' и 'b' определены в верхней части области, но когда' a' присваивается 'b', все еще не определено, и поэтому' a' будет оцениваться как 'a = undefined + 1', что приведет к 'NaN' – andlrc

+0

@ dev-null спасибо за разъяснение – Tom

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>

2

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

Working fiddle

Пример кода:

(function() { 

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

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


}); })(); 
1

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

(function() { 
'use strict'; 

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

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

    var v = dependency2.somefunction(arg1,arg2,...);//will trigger the error because dependency 2 && 3 are misplaced. 
    //sometimes it can be difficult to see at the first look especially when you have many dependencies 
} 
})(); 
Смежные вопросы