Question

我正在试图弄清楚为什么我的超时功能会给出错误，从而限制了模型值的变化。

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

Answer 1

您需要先定义callAtTimeout，然后再使用它。

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

Javascript中的初始化不是 hoisted 。

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

Answer 3

您正在调用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);


 }); })();

Answer 4

定义诸如var callAtTimeout = function() { ... }之类的函数发生在运行时，而不是在编译时（而function callAtTimeout() { ... }定义函数是在编译时）。

因此，callAtTimeout尚未在该行上定义：

$timeout(callAtTimeout,3000);

将callAtTimeout的声明移到该行之上，或将其更改为function callAtTimeout() { ... }

Answer 5

当两个或多个依赖项放错位置时，也会发生错误。我知道答案有点偏离主题，但阅读本文可能有助于某人。

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

Answer 6

我花了很多时间来修复它。就我而言，这是一个内部错误。您只需要

中断Angular CLI（ Ctrl + c ）和
再次
运行（ ng服务）。

然后它开始识别我所有新定义的功能。

Answer 7

您需要定义callAtTimeout然后使用它。

Angular JS TypeError：f不是函数

7 个答案: