Question

我已经编写了这段代码来测试$ scope功能，因为我刚开始学习AngularJS。但是，每当我单击提交按钮时，都不会发生任何事情。

这是我的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>

我似乎无法在代码中找到问题。我尝试了很多解决方案，但没有一个对它有明显的影响。

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

提前致谢。

Answer 1

我认为问题在于HTML的结构。因为角度范围是从HTML元素父子层次结构中解析的。

您的testAppCtrl在正文中（位于您的表单中），register()函数位于testAppCtrl范围内（但您正试图在正文之外访问它）。因此，您无法在层次结构中从外部访问它。将Body放在外面，form放在里面。此外，ng-app应与ng-controller的级别相同或更高。因为您可以将控制器绑定到app / module而不是相反。

所以，代码应该是这样的，

<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>

Answer 2

我发现了一些事情。应该在ng-controller中声明ng-app。您将返回纯变量而不是范围变量。

无论如何，这是修复。

＆＃13;

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;
    };
  }
]);

＆＃13;

<!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>

＆＃13;

为什么提交按钮不起作用？

2 个答案: