无法调用控制器构造函数和提交函数答案

【问题标题】：Unable to invoke controller constructor and submit function无法调用控制器构造函数和提交函数
【发布时间】：2016-04-15 12:00:03
【问题描述】：

我有以下代码，但我无法找出为什么我的控制器没有被调用？ -

index.html -
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1"
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
  </head>
  <body ng-app="myApp">
    

    <div class="container">
  <div class="row">  
 
      <div class="col-xs-12">
          <!-- FORM ============ -->
        
          <form name="userForm" ng-submit="main.submitForm()" novalidate>

              <!-- USERNAME -->
              <div class="form-group" ng-class="{'has-error' : userForm.username.$invalid && !userForm.username.$pristine }">
                  <label>Username</label>
                  <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
                  <p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
                  <p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
              </div>
              
              <!-- Password -->
              <div class="form-group" ng-class="{ 'has-error' : userForm.pwd.$invalid && !userForm.pwd.$pristine }">
                  <label>Password</label>
                  <input type="password" name="password" class="form-control" ng-model="user.pwd">
                  <p ng-show="userForm.pwd.$invalid && !userForm.pwd.$pristine" class="help-block">Enter a valid Password.</p>
              </div>
              
              <button type="submit" class="btn btn-primary col-xs-12" ng-disabled="userForm.$invalid">Submit</button>
              
          </form>

      </div>

  </div>
</div>

    <div class="footer footertxt">
      <div class="container">
        <p>@Copyright xyz</p>
      </div>        </div>


    
    <script type="text/javascript" src="cordova.js"></script>

    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-touch/angular-touch.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/controllers/main.js"></script>
        <script src="scripts/controllers/about.js"></script>
        <script src="scripts/services/cordova.js"></script>
        <!-- endbuild -->
</body>
</html>

main.js:

'use strict';


angular.module('myApp')
  .controller('MainCtrl', function ($scope, cordova) {
    console.log("Hello...")
    this.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
    cordova.ready.then(function () {
        alert('Cordova is ready');
    });

    // function to submit the form after all validation has occurred            
    $scope.submitForm = function() {

        // check to make sure the form is completely valid
        if ($scope.userForm.$valid) {
            alert('our form is amazing');
            console.log("For submitted..")
        }

    };
});

app.js：

/**
 * @ngdoc overview
 * @name angularCordovaTickrv01App
 * @description
 * # myApp
 *
 * Main module of the application.
 */
angular
  .module('myApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

【问题讨论】：

另外，如果我把视图放在一个单独的文件中，它会给我 Cross origin 错误。如何解决？
我在你的 html 中没有看到 ng-controller='MainCtrl'

标签： css angularjs controller ng-submit

【解决方案1】：

修改你的ng-submit，你就不用放main.submitForm()

<form name="userForm" ng-submit="submitForm()" novalidate>

此外，您的控制器中的 cordova 注入存在错误。

看看this Plunker

【讨论】：

【解决方案2】：

我在您的 index.html 中看不到任何具有 ng-view 的位置，您的视图是从哪里加载的。地点<div ng-view></div>

【讨论】：

试过了，没有变化。

【解决方案3】：

既然你在控制器变量上调用submitForm，你不应该在$scope上设置函数，而是在控制器上：

// $scope.submitForm = function() {
this.submitForm = function() {

【讨论】：

试过了，没有变化。