所以我正在学习如何在 angularjs 中使用 Controller ，但我陷入了困境。我使用 html 创建了一个表单，并进行了测试以查看 Controller 是否通过数据绑定(bind)属性“message”响应 html。但是，“输入您的详细信息”不会出现在浏览器的“添加事件”下。我的代码中遗漏了什么吗？ app.module 文件夹中是否有某个地方应该声明构造函数？让我知道你的想法。
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body>
<h3>Add Event</h3>
<div ng-app='eventForm' name='AddEventForm' ng-submit='AddEvent();' ng-controller='eventsCtrl'>
{{message}}
<table>
<tr>
<td>Event Name</td>
<td><input type="text" ng-model="event.Name" required /></td>
</tr>
<tr>
<td>Event Location</td>
<td><input type="text" ng-model="event.Location" required /></td>
</tr>
<tr>
<td>Event Description</td>
<td><input type="text" ng-model="event.Description" required /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="submit" ng-disabled="AddEventForm.$invalid"></td>
</tr>
</table>
</div>
<script>
var eventForm = angular.module('eventForm', []);
eventForm.controller('eventsCtrl', function($scope) {
$scope.message = 'Enter your details';
$scope.addEvent = function()
{
}
});
</script>
</body>
</html>
最佳答案
您可以点赞以下内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<h3>Add Event</h3>
<form
ng-app="eventForm"
ng-controller="eventsCtrl"
name="AddEventForm"
ng-submit="AddEvent()"
>
{{ message }}
<table>
<tr>
<td>Event Name</td>
<td><input type="text" ng-model="event.Name" required /></td>
</tr>
<tr>
<td>Event Location</td>
<td><input type="text" ng-model="event.Location" required /></td>
</tr>
<tr>
<td>Event Description</td>
<td><input type="text" ng-model="event.Description" required /></td>
</tr>
<tr>
<td colspan="2">
<button type="submit" ng-disabled="AddEventForm.$invalid">
Submit
</button>
</td>
</tr>
</table>
</form>
<script>
var eventForm = angular.module("eventForm", []);
eventForm.controller("eventsCtrl", function($scope, $log) {
$scope.message = "Enter your details";
$scope.AddEvent = function() {
$log.log($scope.event);
};
});
</script>
</body>
</html>关于javascript - 更改 Controller 内的模型对象来操作 DOM 对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53827506/