Question

这是我的HTML和JS文件

HTML文件

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

<head>
  <!--Works with latest Stable Build-->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

  <!--Does not work with Latest Beta-->
  <!--UNCOMMENT ME! <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.min.js"></script>-->


  <script src="script.js"></script>
</head>

<body ng-controller="MainController">
  <h1>Angular Playground</h1>
  {{message}}
  <br />Total Length: {{message.length}}
</body>

</html>

JAVASCRIPT FILE

var MainController = function($scope) {
    $scope.message = "Hello, Michael";
};

如果我使用最新的稳定版本，那么我得到以下结果（这显然是正确的）：

角度游乐场

你好，迈克尔总长：14

但是，如果我使用Beta 18，那么我会收到以下错误：

错误：[ng：areq]参数'MainController'不是函数，未定义

，页面返回以下内容：

Angular Playground＃2

{{message}}总时长：{{message.length}}

任何想法，可能是什么造成的？

Answer 1

使用最新版本的Angular（> 1.3.0），您无法声明全局构造函数并将其与ng-controller一起使用。

快速修复是创建角度模块并将MainController添加为控制器。

这里我将主控制器包装在IIFE中，以防止将该功能添加为全局：

(function() {

    angular
        .module("appName", [])
        .controller("MainController", MainController);

    MainController.$inject = ["$scope"];

    function MainController($scope) {
        $scope.message = "Hello, Michael";
    };

})();

在HTML中，您需要将角度模块的名称添加到ng-app指令中：

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

<head>
  <!--Works with latest Stable Build-->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

  <!--Does not work with Latest Beta-->
  <!--UNCOMMENT ME! <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.min.js"></script>-->


  <script src="script.js"></script>
</head>

<body ng-controller="MainController">
  <h1>Angular Playground</h1>
  {{message}}
  <br />Total Length: {{message.length}}
</body>

</html>

论证＆＃39; MainController＆＃39;不是函数，在AngularJS中未定义

1 个答案: