基本的JavaScript按鈕交互

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 個解決方案

解決方案1
0 2018-12-11 16:05:43

基本的JavaScript按鈕交互

問題描述

1 個解決方案

解決方案1 0 2018-12-11 16:05:43

解決方案1
0 2018-12-11 16:05:43