Question

好的我喜欢2个角度应用。一个是自动的，另一个是自举的。

现在一切都很好，但在控制台我有这个错误：

错误：参数'FormController'不是函数，未定义在错误（本机）在cb（等...

但是我已经测试了表单，但错误仍然存在。现在打破它的是我想把表格放在ng-view div上面，但是当我这样做时，ng-view div就会停止工作。

当我从表单中删除ng-controller =“FormController”时，会出现ng-view div页面，但表格明显失去了它的功能。

也许更有经验的人可以发现问题或提供可能的替代方案。

剥离代码。

<html ng-app="kaidoweb">
<head>
    <!-- add javascripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="js/angular.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>

    <script type="text/javascript">

  // creating Angular Module
  var websiteApp = angular.module('websiteApp', []);
  // create angular controller and pass in $scope and $http
  websiteApp.controller('FormController',function($scope, $http) {
  // creating a blank object to hold our form information.
  //$scope will allow this to pass between controller and view
  $scope.formData = {};
  // submission message doesn't show when page loads
  $scope.submission = false;
  // Updated code thanks to Yotam
  var param = function(data) {
        var returnString = '';
        for (d in data){
            if (data.hasOwnProperty(d))
               returnString += d + '=' + data[d] + '&';
        }
        // Remove last ampersand and return
        return returnString.slice( 0, returnString.length - 1 );
  };
  $scope.submitForm = function() {
    $http({
    method : 'POST',
    url : 'process.php',
    data : param($scope.formData), // pass in data as strings
    headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload)
  })
    .success(function(data) {
      if (!data.success) {
       // if not successful, bind errors to error variables
       $scope.errorName = data.errors.name;
       $scope.errorEmail = data.errors.email;
       $scope.errorTextarea = data.errors.message;
       $scope.submissionMessage = data.messageError;
       $scope.submission = true; //shows the error message
      } else {
      // if successful, bind success message to message
       $scope.submissionMessage = data.messageSuccess;
       $scope.formData = {}; // form fields are emptied with this line
       $scope.submission = true; //shows the success message
      }
     });
   };
});

 angular.element(document).ready(function() {
      angular.bootstrap(document.getElementById('websiteApp'), ['websiteApp']);
    });   
    </script>
</head>
<body>

    <div style="position:relative">
        <div ng-view></div>
    </div>

    <div id="websiteApp" class="contactRow">

        <img class="close" src="img/close.png" ng-click="closeForm()" />
        <form ng-submit="submitForm()" ng-controller="FormController" novalidate class="contactForm" name="form" ng-hide="loaded">
          <input class="input" type="text" name="name" placeholder="SINU NIMI" ng-model="formData.name" ng-class="{'error' : errorName}">
          <input class="input2" type="email" name="email"  placeholder="SINU E-MAIL" ng-model="formData.email" ng-class="{'error' : errorEmail}">
          <div ng-class="{'submissionMessage' : submission}" ng-bind="submissionMessage"></div>
        </form>

    </div>

</body>
</html>

EDIT！要求的额外代码！ app.js

    'use strict';

// angular.js main app initialization
var app = angular.module('kaidoweb', []).
    config(['$routeProvider', function ($routeProvider) {
      $routeProvider.
        when('/', {
         templateUrl: 'pages/index.html',
         activetab: 'index',
         controller: HomeCtrl 
       }).
        when('/works', {
          templateUrl: 'pages/works.html',
          controller: PrivacyCtrl,
          activetab: 'works'
        }).
        otherwise({ redirectTo: '/' });
    }]).run(['$rootScope', '$http', '$browser', '$timeout', "$route", function ($scope, $http, $browser, $timeout, $route) {

        $scope.$on("$routeChangeSuccess", function (scope, next, current) {
          $scope.part = $route.current.activetab;
        });

  }]);

app.config(['$locationProvider', function($location) {
    $location.hashPrefix('!');
}]);

和controller.js

    'use strict';

// optional controllers
function HomeCtrl($scope, $http) {
}

function ProjectCtrl($scope, $http) {
}

function PrivacyCtrl($scope, $http, $timeout) {
}

function AboutCtrl($scope, $http, $timeout) {
}

Answer 1

感谢额外的代码，我相信您需要在您的应用上声明您的控制器：

 app.controller('yourCtrl'.....

Answer 2

为什么您需要第二个角度应用程序？将FormController放入“kaidoweb”-App？

中是不是更好？

var app = angular.module('kaidoweb', []);
//your code goes here

app.config(['$locationProvider', function($location) {
    $location.hashPrefix('!');
}]);

app.controller('FormCrl', ['$scope', '...' function($scope, ...){
    // FormController code goes here
}]);

然后在你的HTML

中

<body>

<div style="position:relative">
    <div ng-view></div>
</div>

<div class="contactRow" ng-controller="FormCtrl">

    <img class="close" src="img/close.png" ng-click="closeForm()" />
    <form ng-submit="submitForm()" ng-controller="FormController" novalidate class="contactForm" name="form" ng-hide="loaded">
      <input class="input" type="text" name="name" placeholder="SINU NIMI" ng-model="formData.name" ng-class="{'error' : errorName}">
      <input class="input2" type="email" name="email"  placeholder="SINU E-MAIL" ng-model="formData.email" ng-class="{'error' : errorEmail}">
      <div ng-class="{'submissionMessage' : submission}" ng-bind="submissionMessage"></div>
    </form>

</div>

</body>

AngularJs错误：参数'FormController'不是函数

2 个答案: