基本的 JavaScript 按钮交互答案

【问题标题】：Basic JavaScript button interaction基本的 JavaScript 按钮交互
【发布时间】：2018-12-11 15:50:18
【问题描述】：

我是 JavaScript 和 Node.js 的新手。

我试图在我的网页中获取一个按钮，以便在单击时调用我的控制器中的一个方法，但到目前为止我没有从我的控制器中得到任何响应。

如何从我的按钮调用.submitEntry() 函数？

这是 index.html 文件：

<!DOCTYPE html>
<meta charset="UTF-8">
<html ng-app='app'>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>

<body>
    <div ng-controller='GameController' class='container'>
        <h1>Palindrome Game</h1>
        <h2>Submit a new word!</h2>
        <form role='form'>
            <div class='form-group'>
                <input ng-model="name" class='form-control' placeholder="Your name">
                <input ng-model="word" class='form-control' placeholder="Word">
                <button ng-click='submitEntry()' class='btn btn-default'>Submit word</button>
            </div>
        </form>
        <h2>Top Scores</h2>
        <ul class='list-group'>
            <li ng-repeat="score in scores | orderBy:'-points'" class='list-group-item'>
                <strong>{{score.name}}</strong> {{score.points}} points
                </li>
        </ul>
    </div>
    <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular.js'></script>
    <script src='ng/app.js'></script>
</body>

这是 app.js 文件：

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

const button = document.getElementById('myButton');

button.addEventListener('click', function(e) 
{
  console.log('button was clicked');
});

app.controller('GameController', function($scope, GameService) 
{
    console.log("Debug 0");

    $scope.submitEntry = function() 
    {
        if (typeof $scope.name === 'undefined' || typeof $scope.word === 'undefined') 
        {
            return;
        }
        var entry = {
            name: $scope.name,
            word: $scope.word
        };
        GameService.submitEntry(entry).success(function(points) 
        {
            $scope.word = undefined;
            GameService.getScores().success(function(scores) 
            {
                $scope.scores = scores;
            });
        });
    };

    GameService.getScores().success(function(scores) 
    {
        $scope.scores = scores;
    });
});

app.service('GameService', function($http) 
{
    this.getScores = function() {
        return $http.get('/api/getScores');
    };
    this.submitEntry = function(entry) {
        return $http.post('/api/submitEntry', entry);
    };
});

非常感谢！任何可以为我指明正确方向的帮助将不胜感激。

【问题讨论】：

我想你忘了把 id 放在你的按钮 div 中。
您能分享一下您在控制台中遇到的错误吗？
我在控制台中没有收到任何错误。
你的api返回成功了吗？
您使用旧版本的 angularJS 有什么原因吗？

标签： javascript angularjs node.js express

【解决方案1】：

这是一个简单的按钮，一旦点击就会显示警报。

function Channels($scope) {
	$scope.test = function() {
  	alert('button clicked!')
  }
}

angular.module('app', [])
  .controller('Channels', Channels);

angular.bootstrap(document.body, ['app']);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
 <body ng-controller="Channels">
   <button ng-click="test()">
    test
   </button>
 </body>

【讨论】：