0
这里是JS小提琴：https://jsfiddle.net/q6rqk90s/（并非JsFiddle.com工作，但它在我的电脑上做我自己的服务器上，并在（本地工作））AngularJS - 打印更改为页
AngluarJS CODE
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位游客”，代码将添加1位游客到$ scope.totalGuests。 如果他们有足够的客人，他们可以买一个游乐场，例如，10位客人是一个快乐的回合。
每一次乘车都会产生每秒钟X次的客人数量，“欢乐回合”每秒产生1位客人。
现在，我已经成功地构建了一段代码，当我使用console.log时系统工作正常。 唯一的是，我似乎无法反映页面本身的$ scope.totalGuests更改。 但是，一旦我点击按钮添加一个客人，页面上的数字就会添加1个客人+自动生成的金额。
我希望{{totalGuests}}在每次代码自动生成访客时自动更新页面。无论如何要做到这一点？我想有，但我还没有找到它。
我试过无数的东西，但我无法弄清楚，我试过$ watch和使用ng-onchange，但似乎没有任何工作。
非常感谢你们提前！
尽量不要在'ParkController'内嵌入'ParkController' - 这可能会以困难的方式混淆范围。 – Bigood
谢谢我要试试这个！ –