在 Angular 中播放 FizzBuzz答案

【问题标题】：Playing FizzBuzz in Angular在 Angular 中播放 FizzBuzz
【发布时间】：2015-09-24 21:24:47
【问题描述】：

我已经成功地在 Angular 中实现了 FizzBuzz，并且想知道我是否按照 Angular 最佳实践做所有事情。我的问题： 1）有没有办法直接在工厂设置 $scope.display 而不是返回一些东西？所以我可以在那里做 $scope.display = "FIZZ" 而不是 "return FIZZ" 吗？ 2) 我真的需要单独的 $scope.counter 和 $scope.display 变量吗？

代码：

angular.module('fizzbuzz', [])


.factory("Counter", function() {
  var increment = function(number) {
    if (number % 3 === 0 && number % 5 === 0) {
      //any way to set $scope.display directly here?
      return "FIZZBUZZ"
    }
    if (number % 3 === 0) {
      return "FIZZ"
    }
    if (number % 5 === 0) {
      return "BUZZ"
    }
    return number;
  }
  return {
    increment: increment
  }
})

.controller("FizzBuzz", function($scope, Counter) {
  // is there any way to do this without a separate counter variable?
  $scope.display = 0;
  $scope.counter = 0;
  $scope.increment = function() {
    //increment the counter before going into the function, reacting to ng-click
    $scope.counter++;
    //call the factories function to actually display
    $scope.display = Counter.increment($scope.counter);
  }
})

//HTML:

<doctype! html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="fizzbuzz.js"></script>
</head>
<body>
    <div ng-app="fizzbuzz" ng-controller="FizzBuzz">
        <h1 ng-click="increment()"> {{ display }} </h1>
    </div>
</body>
</html>

更新：

采纳了 Shaun 的建议，但没有显示任何内容：

angular.module('fizzbuzz', [])


.factory("Counter", function() {
  var service = {};
  service.number = 0;
  service.display = "";
  service.increment = function() {
    service.number++;
    if (service.number % 3 === 0 && service.number % 5 === 0) {
      //any way to set $scope.display directly here?
      service.display = "FIZZBUZZ"
    }
    if (service.number % 3 === 0) {
      service.display = "FIZZ"
    }
    if (service.number % 5 === 0) {
      service.display = "BUZZ"
    } else {
      service.display = service.number;
    }
  }

  return service;
})

.controller("FizzBuzz", function($scope, Counter) {
  // can reference method and data from the service
  $scope.increment = Counter.increment;
  $scope.display = Counter.display;
})

【问题讨论】：

似乎这更适合codereview.stackexchange.com
@NeilS 好点下次会在那里提交！
用可运行的 sn-p 更新了我的帖子，问题是当您复制那里的值时，您没有通过原始对象使用引用，因此对原始对象属性的更新不会更新这些副本

标签： javascript angularjs fizzbuzz

【解决方案1】：

angular.module('fizzbuzz', [])
    
    
    .factory("Counter", function() {
      var increment = function() {
        service.number++;
        if (service.number % 15 === 0) {
          //any way to set $scope.display directly here?
          service.display = "FIZZBUZZ"
        }
        else if (service.number % 3 === 0) {
          service.display =  "FIZZ"
        }
        else if (service.number % 5 === 0) {
          service.display =  "BUZZ"
        }else{
          service.display = service.number
        }
      }
      var service = {
        increment: increment,
        number:0,
        display: 'Click to start'
      }
      return service;
    })
    
    .controller("FizzBuzz", function($scope, Counter) {
      // can reference method and data from the service
      $scope.Counter = Counter;
    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
Testing
<div ng-app="fizzbuzz" ng-controller="FizzBuzz">
  <h1 ng-click="Counter.increment()"> {{ Counter.display }} {{ Counter.number }} </h1>
</div>

修改为包含一个 HTML 用法示例。还根据此处的解释修改了 FIZZ BUZZ 逻辑： http://c2.com/cgi/wiki?FizzBuzzTest

【讨论】：

我尝试了您的方法，但没有成功——鉴于 html，屏幕上根本没有显示任何内容。另外，感谢您澄清 $scope 不在工厂中。
编辑我的代码以显示我从您的建议中尝试过的内容。
抱歉，最初的简短帖子试图在我的手机上进行，所以无法真正测试，只能盲目地写它。更新为可运行的 sn-p
谢谢，没问题。问题是尽管我必须只显示数字或文本（不能同时显示两者）。感谢澄清服务！

【解决方案2】：

您的问题：1）有没有办法直接在工厂中设置 $scope.display 而不是返回一些东西？所以我可以在那里做 $scope.display = "FIZZ" 而不是 "return FIZZ" 吗？

不，你做得很好！

2) 我真的需要单独的 $scope.counter 和 $scope.display 变量吗？

在您的控制器中，您不需要将计数器变量放在您的范围内。它只是一个增量变量。

您的 increment() 函数也可以返回您的显示编号：

.controller("FizzBuzz", function($scope, Counter) {

  // is there any way to do this without a separate counter variable?
  var counter = 0;

  $scope.increment = function() {
    counter++;
    return ( Counter.increment(counter) );
  }
});

HTML

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="fizzbuzz.js"></script>
</head>
<body>
    <div ng-app="fizzbuzz" ng-controller="FizzBuzz">
        <h1 ng-click="increment()" ng-bind="increment();"> </h1>
    </div>
</body>
</html>

【讨论】：

谢谢---您的更改将如何影响工厂？
否，但代码更简洁，您不必创建 3 个作用域变量 :)