这是 JS fiddle : https://jsfiddle.net/q6rqk90s/ (在 JsFiddle.com 上不起作用，但它在我自己的服务器和我的计算机上(本地)工作)
AngluarJS 代码
angular.module('RealParkClicker', [])
.controller('ParkController', ParkController)
.directive('messageBox', messageBox);
function ParkController($scope){
$scope.title = 'Real Park Clicker - Run your own park, anywhere you are!';
$scope.promo = 'Start clicking and you can buy these rides!';
$scope.parkOwner = "Add your name";
$scope.parkName = "Add park name";
$scope.parkOpen = true
$scope.ownedRides = 0
$scope.totalGuests = 0
$scope.allTheGuests = 0
$scope.rides = [
{
name: "Merry Go Round",
price: 10,
gpm: 1,
img: 'img/merrygoaround.jpg',
owned: 0
},
{
name: "Swinging Ship",
price: 20,
gpm: 5,
img: 'img/swingingship.jpg',
owned: 0
},
{
name: "Free Fall Tower",
price: 40,
gpm: 10,
img: 'img/freefall.jpg',
owned: 0
},
{
name: "Log Flume",
price: 50,
gpm: 15,
img: 'img/logflume.jpg',
owned: 0
}
];
$scope.changeOwner = changeOwner;
$scope.changeParkName = changeParkName;
$scope.addGuest = addGuest;
$scope.buyRide = buyRide;
$scope.sellRide = sellRide;
// $scope.generateGuests = generateGuests
$scope.$watch('totalGuests', function(newValue, oldValue){
$scope.totalGuests = newValue;
});
function changeOwner(){
$scope.parkOwner = $scope.newOwner
$scope.newOwner = '';
}
function changeParkName(){
$scope.parkName = $scope.newParkName
$scope.newParkName = '';
}
function addGuest(){
$scope.totalGuests++
$scope.allTheGuests++
}
function buyRide(index){
if($scope.totalGuests === $scope.rides[index].price || $scope.totalGuests > $scope.rides[index].price ) {
$scope.rides[index].owned +=1;
$scope.totalGuests -= $scope.rides[index].price;
$scope.ownedRides +=1;
// generateGuests($scope.rides[index].gpm);
var rideGPM = $scope.rides[index].gpm;
// var testMessage = "HELLO!"
setInterval(function(){ generateGuests(rideGPM); }, 3000);
}
}
function sellRide(index){
if($scope.rides[index].owned > 0) {
$scope.rides[index].owned -=1;
$scope.totalGuests += $scope.rides[index].price
$scope.ownedRides -=1;
console.log($scope.rides[index])
}
}
function generateGuests(number){
var rideGPM = number
$scope.totalGuests += rideGPM;
console.log($scope.totalGuests);
}
}
ParkController.$inject = ['$scope'];
function messageBox(){
return {
restrict: 'E',
template: '<div><input ng-model="newMessage"/><button ng-click="sendMessage()">Send</button></div>',
controller: 'ChatController'
};
}
Index.HTML 代码
<!doctype html>
<html>
<head>
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Roboto:500,300,700,400' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet" />
<title>Real Park Clicker</title>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="RealParkClicker">
<div ng-controller="ParkController">
<div class="header">
<div class="container">
<h1>Real Park Clicker</h1>
<h2>Park Name: {{parkName}}</h2></br>
<input ng-model="newParkName"/>
<button ng-click="changeParkName()">Set Park Name</button>
<h3>Park owner: {{parkOwner}}</h3>
<input ng-model="newOwner"/>
<button ng-click="changeOwner()">Set owner</button>
</div>
</div>
<div class="main" ng-controller="ParkController">
<div class="container">
<h2>{{promo}} <button ng-click ="addGuest()">Add 1 Guest</button> {{totalGuests}}</h2>
<div ng-repeat="ride in rides track by $index" class="col-md-6">
<div class="thumbnail">
<img ng-src="{{ride.img}}">
<p class="title">{{ride.name}}</p>
<p class="price">{{ride.price}} Guests
</p>
<p class="gpm">This ride generates {{ride.gpm}} guests per second.</p>
<p class="owned"> You own {{ride.owned}} of this ride</p>
<div class="store">
<p class="buy" ng-click="buyRide($index)">Buy</p>
<p class="sell" ng-click="sellRide($index)">Sell</p>
</div>
</div>
</div>
</div>
<center>
<h3>Park Stats</h3>
<ul>
<li>Total owned Rides: {{ownedRides}}</li>
<li>User Generated Guests In Total: {{allTheGuests}}</li>
<ul>
</center>
<div class="footer">
<div class="container">
<h2>Available for iPhone and Android.</h2>
<img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/app-store.png" width="120px" />
<img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/google-play.png" width="110px" />
</div>
</div>
</div>
</body>
</html>
我正在构建一个“点击器风格”游戏，用户单击“添加 1 位 guest ”，代码将向 $scope.totalGuests 添加 1 位 guest 。 如果他们有足够的客人，他们可以购买游乐园设施，例如，10 位客人就是旋转木马。
每次游乐设施每秒会产生 X 名客人，旋转木马每秒产生 1 名客人。
现在，我已经成功构建了一段代码来执行此操作，当我使用 console.log 时，系统运行完美。 唯一的问题是，我似乎无法在页面本身上反射(reflect) $scope.totalGuests 的更改。 但是，一旦我点击添加访客按钮，页面上的数字就会添加 1 位访客 + 自动生成的金额。
我希望每次代码自动生成访客时，页面上的 {{totalGuests}} 都会自动更新。有办法做到这一点吗？我猜有，但我还没找到。
我尝试了无数的方法，但我无法弄清楚，我尝试了 $watch 并使用 ng-onchange 但似乎没有任何效果。
提前非常感谢你们!
最佳答案
您的问题是 Angular 不知道它需要更新显示的值，因为您的generateGuest 函数是使用 setInterval 调用的，因此代码在 Angular 上下文之外运行。
我认为简单地使用 Angular $interval函数而不是 setInterval(或者 $timeout 如果您的 Angular 版本没有 $interval)应该可以解决您的问题。
您可以通过阅读 $scope.$apply 和 $scope.$digest 来了解更多原因。
关于javascript - AngularJS - 将更改打印到页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36383760/