在 Angular 中播放 FizzBuzz

Question

我已经在 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;
})

Answer 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

Answer 2

您的问题：1) 有什么方法可以直接在工厂中设置 $scope.display 而不是 returning 某些东西吗？所以我可以在那里做 $scope.display = "FIZZ" 而不是 "return FIZZ" 吗？

不，你做得很好！

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

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

您的 increment() 函数也可以 return 您的显示数字：

JS

.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>

在 Angular 中播放 FizzBuzz

Playing FizzBuzz in Angular

javascript

fizzbuzz

angularjs

在 Angular 中播放 FizzBu​​zz

Playing FizzBuzz in Angular

javascript

fizzbuzz

angularjs

在 Angular 中播放 FizzBuzz