Question

我正在测试AngularJS，当我尝试可视化这个示例时，浏览器的控制台显示了类似这样的内容：

Error: Argument 'mainController as mainCtrl' is not a function, got undefined
    at Error (native)
    at bb

我的项目中只有两个文件

的index.html

   <!doctype html>
<html ng-app="my-app">
  <head>
    <title>Angular controllers</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- AngularJS and JQuery include.  -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></link>
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"></link>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>

  <body>

    <div class="container">
      <form name="particleForm" ng-controller="mainController as mainCtrl" ng-submit="mainCtrl.addData()">
        {{ mainCtrl.data.email }}
        <div class="form-group">
          <label for="text" class="col-sm-2 col-sm-offset-2">E-mail</label>
        </div>

        <div class="col-sm-10">
          <input type="text" name="text" class="form-control" ng-model="mainCtrl.data.email" placeholder="Enter e-mail..."></input>
        </div>
      </form>
    </div>

    <script src="app.js"></script>
  </body>
</html>

app.js

(function (){
  var app = angular.module('my-app', []);

  var list = [];

  app.controller ('mainController', function (){
    this.data = {};

    this.addData = function (){
      list.push (this.data);

      list.data = {};
    };
  });
})();

我只想展示我input field上的所有内容。

Answer 1

FooController as FooCtrl语法仅从AngularJS 1.1.5（see this）开始提供。你正在使用1.0.8。

错误参数未定义

1 个答案: