javascript - Rails/Angular JS : Ngclick not appearing to work

Question

我正在我的 Rails 应用程序中创建一个简单的 Angular 应用程序来显示注册用户列表。最终的目标是循环遍历所有用户并随机选择一个用户，将其“获胜者”属性更新为“true”，并更新其姓名旁边的 DOM，或者可能显示获胜者的警报。

我创建了一个新的测试函数“showPool”来查看 ngClick 是否正常工作，但它似乎根本不起作用(即单击按钮，它们什么也不做)。谁能看到我可能缺少什么？

HTML:

<% if user_signed_in? && current_user.role == "Admin" %>

    <h1 class="center">Winner Raffler</h1>
    <h4 class="center">To select a winner for this year's scholarship, simply click "choose winner" below</h4>

    <div ng-controller="rafflerController"> 
        <ul>
            <li ng-repeat="user in users">
                {{"Applicant Name:" + " " + user.first_name + " " + user.last_name + " " + "Winner?" + user.winner}}
                <span ng-show="user.winner">Winner</span>
            </li>
        </ul>

    </div>
<button ng-click="drawWinner()">Draw Winner</button><br>
<button ng-click="showPool()">Show List of Potential Winners </button>
<% end %>

Javascript 文件:

//Pool of Winners
var pool = [];

var rafflerApp = angular.module('rafflerApp', ["ngResource"]);

rafflerApp.controller('rafflerController', function($scope, $resource) {
        User = $resource("/users.json", {id: "@id"}, {update: {method: "GET", isArray:true}})
        $scope.users = User.query()

        //Show User Pool List
        $scope.showPool = function() {
            if (pool.length === 0) {
                alert("There are currently no available users in pool.");
            } else {
                alert("There are currently" + pool.length + " potential winners in the user pool.");
            }
        }

        //Draw a New Winner
        $scope.drawWinner = function(){
            angular.forEach($scope.users,function(user){
                if(!user.winner){
                    pool.push(user) ;
                }
            });
            if(pool.length >0) {
                user = pool[Math.floor(Math.random()*pool.length)];
                user.winner = true;
                $scope.lastWinner = user;
            }
        }

});

Answer 1

您需要将按钮放置在您启动 rafflerController Controller 的 div 范围内:

  <div ng-controller="rafflerController"> 
    <ul>
        <li ng-repeat="user in users">
            {{"Applicant Name:" + " " + user.first_name + " " + user.last_name + " " + "Winner?" + user.winner}}
            <span ng-show="user.winner">Winner</span>
        </li>
    </ul>
//YOUR CODE GOES HERE INSTEAD
<button ng-click="drawWinner()">Draw Winner</button><br>
<button ng-click="showPool()">Show List of Potential Winners</button>

</div>