Angular JS - 控制器未定义

我是AngularJS世界的新手。我有这个例子来为AngularJS页面定义一个控制器。试图打开页面时，我最终在浏览器中显示原始文本。Angular JS - 控制器未定义

我正在尝试将angular.js（lib/angular.js）下载到本地文件系统。

的页面，如下所示：

<!doctype html> 
<html ng-app> 
    <head> 
     <script src="lib/angular.js"></script> 
     <script type="text/javascript"> 
      function MyController($scope) { 
       $scope.clock = new Date(); 
       var updateClock = function() { 
        $scope.clock = new Date(); 
       }; 
       setInterval(function() { 
        $scope.$apply(updateClock); 
       }, 1000); 
       updateClock(); 
      }; 
     </script> 
    </head> 
    <body> 
     <div ng-controller="MyController"> 
      <h1>Hello {{clock}}!</h1> 
     </div> 
    </body> 
</html>

我最终得到如下结果：

您好{{时钟}}！

在浏览器控制台，我得到了错误日志如下：

Error: [ng:areq] Argument 'MyController' is not a function, got undefined

我缺少什么？

最好的问候，钱德拉。

来源

2015-02-11 Mouli

控制器需要使用'angular.module（“myApp”，[]）显式注册。 r（“MyController”，MyController）'从Angular 1.3开始我想。此外，您应该使用'$ interval'来避免执行'$ scope。$ apply'，并且您应该取消间隔，否则即使关闭站点后它也会继续。 – 2015-02-11 08:23:38

我使用的示例是使用较低版本），但我已经使用了AngularJS的更高版本（1.3）。我纠正了它，并执行了接受答案中给出的代码。现在一切正常。 – Mouli 2015-02-11 09:33:49

您需要启动一个角度模块并使用该模块创建一个控制器。

例如：

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

app.controller('MyController', function($scope) { 
     $scope.clock = new Date(); 
     var updateClock = function() { 
       $scope.clock = new Date(); 
     }; 
     setInterval(function() { 
      $scope.$apply(updateClock); 
     }, 1000); 
     updateClock(); 
});

然后你需要在NG-应用= “对myApp” HTML标记来指定应用

所以你的HTML将是：

<!DOCTYPE html> 
<html ng-app="myApp"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script> 
    <script src="app.js"></script> 
    </head> 

    <body> 
    <div ng-controller="MyController"> 
      <h1>Hello {{clock}}!</h1> 
     </div> 
    </body> 

</html>

Working Plunkr

来源

2015-02-11 08:23:43 V31

谢谢@ V31，这个问题解决了。我正在使用下载的angular.js到文件系统而不是使用CDN。再次感谢你。 – Mouli 2015-02-11 09:26:18

Angular JS - 控制器未定义

回答

相关问题