My objective is to develop a point allocation system within AngularJS. I have successfully created a basic directive that introduces DOM elements, including a span displaying "0" points and buttons for incrementing and decrementing. The total number of points available can be allocated across 4 different categories.
Custom Directive
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; // Initially set here, but will be dynamic
$scope.skills = {};
$scope.skills.strength = {
points: 0,
description: '...',
// additional properties
};
$scope.skills.speed = {
points: 0,
description: '...',
// additional properties
};
$scope.skills.intelligence = {
points: 0,
description: '...',
// additional properties
};
});
HTML
// more html code before
<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>
In this setup, as points are added to each skill, the variable $scope.pointsAvailable decreases accordingly. For example, if you allocate 3 strength points, only 7 remain to distribute among other skills.
I attempted modifying "pointsAvailable" upon clicking the increment buttons, but encountered a roadblock where allocating all points to one skill capped at 5 points, rendering the increment buttons unusable. Each increase in points decreased "pointsAvailable", preventing the allocation of all 10 points to a single skill.