AngularJS-打印更改到页面

AngularJS - Print Change To Page

本文关键字：打印 AngularJS-      更新时间：2023-11-17

这是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位访客"，代码将向$scope.totalGuests添加1位客人。如果他们有足够的客人，他们可以买一辆娱乐公园的车，例如，10位客人就是一个快乐的循环。

每一次骑行每秒将产生X位客人，而"快乐回合"每秒将产生1位客人。

现在，我已经成功地构建了一段代码，当我使用console.log时，系统可以完美地工作。唯一的问题是，我似乎无法在页面上反映$scope.totalGuests的更改。但是，一旦我点击按钮添加一位客人，页面上的数字就会添加1位客人+自动生成的金额。

我希望｛｛totalGuests｝｝在每次代码自动生成guest时自动在页面上更新。有办法这样做吗？我想有，但我还没有找到。

我试过无数种方法，但都想不通，我试过$watch和使用ngonchange，但似乎都不起作用。

提前感谢你们！

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

我认为简单地使用angular $interval函数而不是setInterval（或者如果您的angular版本没有$interval，则使用$timeout）应该可以解决您的问题。

您可以通过阅读$scope.$apply和$scope.$digest来了解更多关于这一点的信息。

相关文章：