参数'MyController'不是一个函数,未定义:Edge浏览器和Angularjs上的Firefox / Chrome之间的差异

时间:2015-10-11 12:56:07

标签: angularjs firefox microsoft-edge

我正在按照ng-book中的代码示例学习AngularJS。

我在app根文件夹下有以下文件夹结构

../css
../img
../lib
../lib/angular
../js
../partials

我在lib / angular目录中安装了角度1.2.11(是的,我知道这不是最新版本..)

以下代码在Firefox(41.0.1)中正常工作但在Chrome(45.0.2454.101 m),Edge和IE(11.0.22)中我收到错误消息 “Argument'MyController'不是函数,未定义”

代码如下:

根文件夹中的index.html:

<!doctype html>
    <html lang="en" ng-app>
    <head>
      <meta charset="utf-8">
      <title>My AngularJS App</title>
      <link rel="stylesheet" href="css/app.css"/>
    </head>
    <body>
       <div>
           {{1+1}}
       </div>
        <div ng-controller="MyController">
            {{name}}<br/> {{clock}}
        </div>

      <script src="lib/angular/angular.js"></script>
      <script type="text/javascript" src="js/app.js"></script>
     </body>
    </html>

在js文件夹中的app.js中:

function MyController($scope) {
    $scope.name = "in sub";
    $scope.clock = new Date();
    console.log = "Active";
    var updateClock = function () {
        $scope.clock = new Date();
    };

    setInterval(function () {
        $scope.$apply(updateClock);
    }, 1000);

    updateClock();
};

如果我将app.js放入根文件夹中,它仍然无效,因此它与路径无关。 如果我将代码放入内联脚本然后它可以工作,所以我不认为这是代码的问题。为什么这在一个浏览器中工作而在其他浏览器中不工作作为参考我直接从文件浏览器调用它,而不是通过http。 文件:/// C:/Users/aaron_000/Desktop/Programming/Angular/app/index.html 如果我升级到更高版本的角度,问题会消失吗? 我知道这不是构建Angular应用程序的“正确”方法,但我一次只使用一个组件:)

1 个答案:

答案 0 :(得分:0)

看js / app.js是对的。对我来说很好。

var app = angular.module("App", []);

app.controller('AppController', function MyController($scope) {
  $scope.name = "in sub";
  $scope.clock = new Date();
  console.log = "Active";
  var updateClock = function() {
    $scope.clock = new Date();
  };

  setInterval(function() {
    $scope.$apply(updateClock);
  }, 1000);

  updateClock();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>
<!doctype html>
<html lang="en" ng-app="App">

<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
</head>

<body>
  <div>
    {{1+1}}
  </div>
  <div ng-controller="AppController">
    {{name}}
    <br/>{{clock}}
  </div>
</body>

</html>