javascript - 如何在 AngularJS 中创建积分分配系统？

Question

我正在尝试在 AngularJS 中创建一个积分分配系统。我已经成功创建了一个添加 DOM 元素的基本指令。这些元素包括显示“0”点的跨度以及用于递增和递减的按钮。共有可用点数可用于在 4 个不同类别之间分配。

指令

angular.module('components', []).
  directive('addSkills', function() {
    return {
      restrict: "A",
      scope: {
        max: '=',
        min: '=',
        pointValue: '='
      },
      template: '<div>' +
                  '<span>{{scoreValue}}</span>' +
                  '<button ng-click="addPoints()" ng-disabled="pointValue >= max">+</button>' +
                  '<button ng-click="minusPoints()" ng-disabled="pointValue <= min">-</button>' +
                  '</div>',
      link: function(scope, element, attrs) {
        scope.addPoints = function() {
          scope.scoreValue += 1;
          scope.$parent.pointsAvailable -= 1;
        };
        scope.minusPoints = function() {
          scope.scoreValue -= 1;
          scope.$parent.pointsAvailable += 1;
        };
      }
    }
  });

Controller

angular.module('myControllers', []).
controller('skills', function($rootScope, $scope, $http, $location, $q) {
  $scope.pointsAvailable = 10; // Hardcoded here, but actually formulated
  $scope.skills = {};
  $scope.skills.strength = {
    points: 0,
    description: '...',
    // more properties
  };
  $scope.skills.speed = {
    points: 0,
    description: '...',
    // more properties
  };
  $scope.skills.intelligence = {
    points: 0,
    description: '...',
    // more properties
  };
});

HTML

// more html code above
<div class="skills">
  <h4>{{pointsAvailable}}</h4>
  <div class="skillRating">
    <label>Strength: </label>
    <div data-add-skills data-point-value="skills.strength.points" data-max="pointsAvailable" data-min="0"></div>
  </div>
  <div class="skillRating">
    <label>Speed: </label>
    <div data-add-skills data-point-value="skills.speed.points" data-max="pointsAvailable" data-min="0"></div>
  </div>
  <div class="skillRating">
    <label>Intelligence: </label>
    <div data-add-skills data-point-value="skill.intelligence.points" data-max="pointsAvailable" data-min="0"></div>
  </div>
</div>

所以我想要完成的是，当你为每项技能添加点数时，$scope.pointsAvailable 就会减少。因此，如果你添加 3 点力量点，那么你就只剩下 7 点可以分配给其他技能。

我尝试在单击增量按钮时修改“pointsAvailable”，但这不起作用，因为将点数分配给一项技能时它最多为 5 点，从而禁用了增量按钮。随着每次增量，“可用点数”都会减少，因此我无法将所有 10 点分配给一项技能。

Answer 1

我创建了一个 super 简单的版本，向您展示如何不需要使用指令:http://jsfiddle.net/ADukg/4768/

这本质上是使用 ng-repeat 来揭示技能之间的共性。

查看:

<div ng-controller="MyCtrl">
  Points available: {{pointsAvailable}}
   <div ng-repeat="skill in skills">
    <div class="skillRating">
        <label>{{skill.name}}</label>
        <div>
            <span>{{skill.score}}</span>
            <button ng-click="addPoints(skill)" ng-disabled="skill.score >= skill.max || pointsAvailable <= 0">+</button>
            <button ng-click="minusPoints(skill)" ng-disabled="skill.score <= skill.min">-</button>
        </div>
      </div>
   </div>
</div>

Controller :

function MyCtrl($scope) {
    $scope.pointsAvailable = 10;

    $scope.skills = [
        { name: 'strength', score: 0, max: 8, min: 0 },
        { name: 'speed', score: 0, max: 10, min: 0 },
        { name: 'intelligence', score: 0, max: 5, min: 0 }
    ];

    $scope.addPoints = function(skill) {
        skill.score += 1;
        $scope.pointsAvailable -= 1;
    };

    $scope.minusPoints = function(skill) {
        skill.score -= 1;
        $scope.pointsAvailable += 1;
    };
}