单击提交后,表单不执行任何操作

时间:2016-11-03 06:04:37

标签: javascript html angularjs node.js sails.js

我一直在为我的NodeJS(使用SailsJS MVC)开发权限系统并遇到了问题。在解决了here概述的第一个错误之后,我现在遇到了一个表单没有任何作用的问题。它不会向控制台发送错误,也不会在SailsJS控制台本身中记录错误。以下是我的代码。

/**
 * GroupsController (API)
 *
 * @description :: Server-side logic for managing Permissions
 * @help        :: See http://sailsjs.org/#!/documentation/concepts/Controllers
 */

module.exports = {

  update: function(req, res, next) {

    var groupObj = {
      groupName: req.param('groupName'),
      canViewUsers: req.param('canViewUsers'),
      canEditUsers: req.param('canEditUsers'),
      canPromoteToStaff: req.param('canPromoteToStaff'),
      canViewNotes: req.param('canViewNotes'),
      canEditPermissions: req.param('canEditPermissions')
    };

    Groups.update(req.param('id'), groupObj, function groupUpdated(err) {
      if (err) {
        return res.redirect('/group/edit/' + req.param('id'));
      }

      res.redirect('/');
    });
  },

  createGroup: function(req, res) {
    Groups.create({
      groupName: req.param('groupName'),
      canViewUsers: req.param('canViewUsers'),
      canEditUsers: req.param('canEditUsers'),
      canPromoteToStaff: req.param('canPromoteToStaff'),
      canViewNotes: req.param('canViewNotes'),
      canEditPermissions: req.param('canEditPermissions')
    }).exec({
      error: function (err) {
        return res.negotiate(err);
      }
    });
  }

};

GroupsController(表单)

angular.module('GroupsModule').controller('GroupsController', ['$scope', '$http', 'toastr', function($scope, $http, toastr) {

  $scope.groupCreateForm = function(){


    // Submit request to Sails.
    $http.post('/createGroup', {
      groupName: $scope.createGroup.groupName,
      canViewUsers: $scope.createGroup.canViewUsers,
      canEditUsers: $scope.createGroup.canEditUsers,
      canPromoteToStaff: $scope.createGroup.canPromoteToStaff,
      canViewNotes: $scope.createGroup.canViewNotes,
      canEditPermissions: $scope.createGroup.canEditPermissions
    })
      .then(function onSuccess(sailsResponse){
        window.location = '/groups';
      })
      .catch(function onError(sailsResponse){

        // Handle known error type(s).
        // If using sails-disk adpater -- Handle Duplicate Key
        var groupAlreadyExists = sailsResponse.status == 409;

        if (groupAlreadyExists) {
          toastr.error('That group already exists', 'Error');
        }

      })
  }}]);

HTML表单

<!--STYLES-->
<link rel="stylesheet" href="/styles/angular-toastr.css">
<link rel="stylesheet" href="/styles/bootstrap.3.1.1.css">
<link rel="stylesheet" href="/styles/importer.css">
<link rel="stylesheet" href="/styles/style.css">
<link rel="stylesheet" href="/styles/theme.css">
<link rel="stylesheet" href="/styles/theme.min.css">
<!--STYLES END-->
<body ng-app="DashboardModule" ng-controller="DashboardController" ng-cloak>
<div class="bs-docs-section clearfix">
  <div class="row">
    <div class="bs-component">
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">Insomnia eSports</a>
          </div>

          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li><a href="/groups"><i class="fa fa-users" aria-hidden="true"></i> Group Management </a></li>
            </ul>

            <!--
            <form class="navbar-form navbar-left" role="search">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
              </div>
              <button type="submit" class="btn btn-default">Submit</button>
            </form>
            -->
            <ul class="nav navbar-nav navbar-right">
              <li><a href="/logout">Sign Out</a></li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
  </div>
</div>

<form ng-submit="groupCreateForm()" id="create-group-form" class="form-signin" name="createGroup">
  <h2 class="form-signin-heading">Create A Group</h2>
  <div class="row">

    <!-- Group Name -->
      <label>Group Name</label>
      <input type="text" class="form-control" placeholder="Group Name" name="groupName" ng-model="createGroup.name" ng-maxlength="25" required>

    </div>

    <!-- Can View Users -->
  <div class="row">
      <label>View Users?</label>
      <input type="checkbox" name="canViewUsers" ng-model="createGroup.canViewUsers">
  </div>

    <!-- Can View Users -->
  <div class="row">
      <label>Edit Users?</label>
      <input type="checkbox" name="canEditUsers" ng-model="createGroup.canEditUsers">
  </div>

    <!-- Can Promote To Staff -->
  <div class="row">
      <label>Promote to Staff?</label>
      <input type="checkbox" name="canPromoteToStaff" ng-model="createGroup.canPromoteToStaff">
    </div>


    <!-- Can Promote To Staff -->
  <div class="row">
      <label>Can view notes?</label>
      <input type="checkbox" name="canViewNotes" ng-model="createGroup.canViewNotes">
  </div>

    <!-- Can Promote To Staff -->
  <div class="row">
      <label>Can edit permissions?</label>
      <input type="checkbox" name="canEditPermissions" ng-model="createGroup.canEditPermissions">
    </div>
  <br/>

  <!-- Disable signup button until the form has no errors -->
  <button class="btn btn-success btn-lg btn-block" type="submit" ng-disabled="createGroup.$invalid">
    <span>Create Group</span>
  </button>
  <input type="hidden" name="_csrf" value="<%= _csrf %>" />
</form>
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/dependencies/angular.1.3.js"></script>
<script src="/js/dependencies/Base64.js"></script>
<script src="/js/dependencies/angular-toastr.js"></script>
<script src="/js/dependencies/compareTo.module.js"></script>
<script src="/js/public/signup/SignupModule.js"></script>
<script src="/js/public/groups/GroupsModule.js"></script>
<script src="/js/private/dashboard/DashboardModule.js"></script>
<script src="/js/public/homepage/HomepageModule.js"></script>
<script src="/js/private/dashboard/DashboardController.js"></script>
<script src="/js/public/groups/GroupsController.js"></script>
<script src="/js/public/homepage/HomepageController.js"></script>
<script src="/js/public/signup/SignupController.js"></script>
<!--SCRIPTS END-->
</body>

2 个答案:

答案 0 :(得分:0)

您的表单没有附加正确的ng-controller,因此$scope.groupCreateForm甚至不应该被调用。尝试将ng-controller="GroupsController"添加到表单中,然后重试。

<form ng-controller="GroupsController" ng-submit="groupCreateForm()" id="create-group-form" class="form-signin" name="createGroup">

答案 1 :(得分:0)

我用以下代码解决了这个问题

<body ng-app="GroupsModule" ng-controller="GroupsController" ng-cloak>

我定义了错误的应用和控制器。感谢Fissio引发了这就是问题的想法。