Question

这是JS小提琴： https://jsfiddle.net/q6rqk90s/ （在JsFiddle.com上不起作用，但它可以在我自己的服务器上运行，在我的计算机上运行（本地））

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位客人是Merry Go Round。

每次骑行每秒会产生X量的客人，Merry Go Round每秒产生1位客人。

现在，我已经成功构建了一段代码来实现这一点，当我使用console.log时，系统运行正常。唯一的问题是，我似乎无法反映页面本身的$ scope.totalGuests更改。但是，一旦我点击按钮添加访客，页面上的数字就会增加1个访客+自动生成的数量。

每次代码自动生成访客时，我希望{{totalGuests}}自动在页面上更新。反正有没有这样做？我想有，但我还没有找到它。

我尝试了无数的东西，但是我无法弄明白，我尝试使用ng-onchange进行观察，但似乎没有任何效果。

提前多谢你们！

Answer 1

你的问题是angular并不知道它需要更新显示的值，因为你的generateGuest函数是用setInterval调用的，所以代码是在角度上下文之外运行的。

我认为只使用角度$interval函数代替setInterval，（或$timeout如果您的角度版本没有$interval）应该修复你的问题。

通过阅读$scope.$apply和$scope.$digest，您可以详细了解原因。

AngularJS - 打印更改页面

1 个答案: