Question

我是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);
    };
});

非常感谢！任何能帮助我指出正确方向的帮助将不胜感激。

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

基本的JavaScript按钮交互

1 个答案: