为什么提交按钮不工作?

Why isn't the submit button working?

本文关键字：工作 按钮 提交 为什么      更新时间：2023-09-26

当我刚开始学习AngularJS时，我写了这段代码来测试$scope特性。但是，每当我单击提交按钮时，什么都没有发生。

下面是我的JS文件

var app = angular.module('permissions', []);
app.controller('testAppCtrl', ['$scope', function testAppCtrl($scope) {
  'use strict';
  $scope.details = {
    itemId: "",
    userID: ""
  };
  $scope.register = function () {
    console.log('User clicked change', details.itemId);
  };
  $scope.fullDetails = function () {
    return details.itemId + " " + details.userId;
  };
}]);

下面是我的PHP文件

<script type="text/javascript" src="include/js/angular-permission-test.js"></script>
<div id="myForm">
  <form name="myForm" action="" ng-app="permissions" ng-submit="register()">
      <h1>Test</h1>
      <body ng-controller="testAppCtrl">
        ItemId: <input type="text" ng-model="details.itemId"> {{details.itemId}}<br><br>
        UserId: <input type="text" ng-model="details.userId"> {{details.userId}}<br><br>
        <input name="submitBtn" type="submit" value="Change" ng-click="register()">
        {{ fullDetails() }}
      </body>
  </form>
</div>
我似乎在代码中找不到问题。我已尝试了许多方法，但都没有明显的效果。

此外，对代码的任何改进都将受到赞赏。

提前感谢。

我认为问题在于你的HTML结构。因为角作用域是从HTML元素的父子层次结构中解析出来的。

您的testAppCtrl在体内(在您的形式内)，register()函数在testAppCtrl的范围内(但您试图在体外访问它)。因此，在层次结构中不能从外部访问它。把Body放在外面，form放在里面。此外，ng-app应该与你的ng-controller处于相同或更高的级别。因为你可以把你的控制器绑定到应用/模块，而不是反过来。

所以，代码应该是这样的， 
<body  ng-app="permissions" ng-controller="testAppCtrl">    
    <div id="myForm">
      <form name="myForm" action="" ng-submit="register()">
          <h1>Test</h1>
            ItemId: <input type="text" ng-model="details.itemId"> {{details.itemId}}<br><br>
            UserId: <input type="text" ng-model="details.userId"> {{details.userId}}<br><br>
            <input name="submitBtn" type="submit" value="Change" ng-click="register()">
            {{ fullDetails() }}
      </form>
    </div>
</body>

我注意到几件事。Ng-app应该在ng-controller中声明。您返回的是普通变量，而不是作用域变量。

无论如何，这是解决办法。

var app = angular.module('permissions', []);
app.controller('testAppCtrl', ['$scope',
  function testAppCtrl($scope) {
    'use strict';
    $scope.details = {
      itemId: "",
      userID: ""
    };
    $scope.register = function() {
      console.log('User clicked change', $scope.details.itemId);
    };
    $scope.fullDetails = function() {
      return $scope.details.itemId + " " + $scope.details.userId;
    };
  }
]);
<!DOCTYPE html>
<html ng-app="permissions">
<head>
  <script data-require="angular.js@1.3.13" data-semver="1.3.13" src="https://code.angularjs.org/1.3.13/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>
<body ng-controller="testAppCtrl">
  <div id="myForm">
    <form name="myForm" ng-submit="register()">
      <h1>Test</h1> ItemId:
      <input type="text" ng-model="details.itemId" />{{details.itemId}}
      <br />
      <br />UserId:
      <input type="text" ng-model="details.userId" />{{details.userId}}
      <br />
      <br />
      <input name="submitBtn" type="submit" />{{ fullDetails() }}
    </form>
  </div>
</body>
</html>

相关文章：