Javascript 如何在AngularJS中创建点分配系统？

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

指示

HTML

//上面有更多html代码
{{pointsavaailable}}
实力：
速度：
情报：

因此，我想完成的是，当您向每个技能添加点数时，$scope.pointsAvailable会减少。因此，如果你增加3个力量点，你只剩下7个力量点分配给其他技能

---

我试着在点击递增按钮时修改“pointsAvailable”，但这不起作用，因为当为一项技能分配点数时，它的最大值为5点，禁用递增按钮。每次增加都会减少“pointsAvailable”，因此我无法（比如）将所有10点分配给一项技能。

我创建了一个超级简单的版本，向您展示了如何不需要使用指令：

这本质上是使用

ng repeat

来揭示技能之间的共性

视图：

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;
        };
      }
    }
  });

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
  };
});

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

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

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;
    };
}