Question

我正在尝试使用ng-click = addAppointment（），但是当我单击页面上的“添加”按钮时，我的浏览器中的Java服务器控制台或JS控制台都没有响应。我一直在靠墙撞击，我只是看不到我错过的东西。

这是我的HTML

<!DOCTYPE html>
<html lang="en" ng-app="AppointmentTrackerApp">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="../static/js/ng-controller.js"></script>
<script src="js/ng-controller.js"></script>
<head>
    <meta charset="UTF-8">
    <title>HomePage</title>
</head>
<body>
<div>
    <br>
        <button ng-click="showme=true" ng-hide="showme">New</button>
    <!--<div ng-show="showme">-->
        <input type="button" ng-click="addAppointment()" value="Add"/><button ng-click="showme=false" ng-show="showme">Cancel</button>
        </br></br>
            Date: <input type="date" name="newAppointment.date"></br>
            Time: <input type="time" name="newAppointment.time"></br>
            Description: <input type="text" name="newAppointment.description">
    <!--</div>-->
</div>

</br></br>
<input type="text" name="searchText"><button type="submit">Search</button>
</br></br>
<li ng-repeat="appointment in appointments"></li>
</body>
</html>

这是我的JavaScript

angular.module('AppointmentTrackerApp', [])
   .controller('SampleController', function($scope, $http) {
        $scope.getAppointments = function() {
                    console.log("About to add the following appointment " + JSON.stringify($scope.newAppointment));

                    $http.get("/appointments.json", $scope.searchText)
                        .then(
                            function successCallback(response) {
                                console.log(response.data);
                                console.log("Adding data to scope");
                                $scope.appointments = response.data;
                            },
                            function errorCallback(response) {
                                console.log("Unable to get data");
                            });
                };
        $scope.addAppointment = function() {
                    console.log("About to add the following appointment " + JSON.stringify($scope.newAppointment));

                    $http.post("/addAppointment.json", $scope.newAppointment)
                        .then(
                            function successCallback(response) {
                                console.log("Adding appointment to database");
                            },
                            function errorCallback(response) {
                                console.log("Unable to get data");
                            });
                };
        $scope.newAppointment={};
        });

Answer 1

HTML代码中的错误很少。脚本标记放置不正确。

您忘记在HTML文件中使用控制器了。

<!DOCTYPE html>
<html lang="en" ng-app="AppointmentTrackerApp">

<head>
    <meta charset="UTF-8">
    <title>HomePage</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
    <script src="script.js"></script>
</head>

<body>
    <div>
        <br>
        <button ng-click="showme=true" ng-hide="showme">New</button>
        <!--<div ng-show="showme">-->
        <input type="button" ng-click="addAppointment()" value="Add" />
        <button ng-click="showme=false" ng-show="showme">Cancel</button>
        Date:
        <input type="date" name="newAppointment.date"> Time:
        <input type="time" name="newAppointment.time"> Description:
        <input type="text" name="newAppointment.description">
        <!--</div>-->
    </div>

    <input type="text" name="searchText">
    <button type="submit">Search</button>

    <li ng-repeat="appointment in appointments"></li>
</body>

</html>

关于Angular声明：

var app = angular.module('AppointmentTrackerApp', []);

app.controller('SampleController', function($scope, $http) {
    // ...
}

<强> Working demo

ng-click没有触发我的JS函数

1 个答案: