Javascript 如何实现AngularJS滑块，其中3个滑块在单个可分配值之间共享？

我想在AngularJS 3中实现代表3个不同属性的滑块 共享共同的最大可分配技能点数

我如何在angularJS中实现这一点 关于AngularJS中的许多元素，有很多例子，但除了最初的用法之外，几乎没有一个使用滑块

e、 g

支票：

指令是你的自然选择。使用属性

max

定义指令。此值是双向绑定的，可以在指令的多个

实例
之间共享

angular.module('Joy', [])
    .controller('JoyCtrl', function ($scope) {
    $scope.max = 10;
})
    .directive('skills', function () {
    return {
        restrict: 'AE',
        scope: {
            max: '=',
            value: '@'
        },
        template: '<span ng-repeat="i in range"=>{{(i==value) ? value : "-"}}</span>',
        controller: function ($scope) {
            $scope.range = [];
            for (var i = 0; i < $scope.max; i++) {
                $scope.range.push(i);
            }
        }
    };
});

angular.module（'Joy'，[]）
.controller（'JoyCtrl'，函数（$scope）{
$scope.max=10；
})
.指令（‘技能’、功能（）{
返回{
限制：“AE”，
范围：{
最大值：'='，
值：'@'
},
模板：“{（i==值）？值：”-“}}”，
控制器：功能（$scope）{
$scope.range=[]；
对于（变量i=0；i<$scope.max；i++）{
$scope.range.push（i）；
}
}
};
});

HTML:



或者（可能更好）：

将值
max
存储在某些
常量中，然后将其注入指令。它避免每次传入参数
max
。
我根据上下文猜测，此功能可能需要保留，因此我建议使用服务。通过一项服务，您可以管理可用的最高积分以及各种不同的技能

angular.module('Skills', [])
    .factory('SkillsService', function() {
         var service = {};
         service.max = 100;
         service.skills = {'strength': 0, 
                           'agility': 0, 
                           'intelligence': 0};

         //The following functions would probably be $http calls if this data needs to be persisted
         service.updateSkill = function(skill, value) {
              service.skills[skill] = value;
         };

         service.pointsRemaining = function() {
              var total = 0;
              angular.forEach(service.skills, function(key, value) {
                   total += value;
              };
              return service.max - total;
         };

         return service;
    });

拥有这项服务意味着您可以在许多地方使用它，并且数据将位于一个位置

您的视图和控制器可以如下所示：

<div ng-controller="SkillsController as skillCtrl">
    <slider ng-change="skillCtrl.updateSkill(skill, sliderValue)" 
            ng-repeat="skill as skillCtrl.skills"
            ng-disabled="skillCtrl.pointsRemaining() === 0"></slider>
</div>

是的，先生，这正是我的问题。这是我的问题，有没有一种更简单的方法来实现您对我的代码的回答而不使用模块和服务？或者有更好的滑块指令可以使用吗？对不起，如果我很困惑的话，我只是一个新手。
angular.module('Skills', [])
    .factory('SkillsService', function() {
         var service = {};
         service.max = 100;
         service.skills = {'strength': 0, 
                           'agility': 0, 
                           'intelligence': 0};

         //The following functions would probably be $http calls if this data needs to be persisted
         service.updateSkill = function(skill, value) {
              service.skills[skill] = value;
         };

         service.pointsRemaining = function() {
              var total = 0;
              angular.forEach(service.skills, function(key, value) {
                   total += value;
              };
              return service.max - total;
         };

         return service;
    });

<div ng-controller="SkillsController as skillCtrl">
    <slider ng-change="skillCtrl.updateSkill(skill, sliderValue)" 
            ng-repeat="skill as skillCtrl.skills"
            ng-disabled="skillCtrl.pointsRemaining() === 0"></slider>
</div>

angular.module('Skills')
    .controller('SkillsController', function(SkillsService) {
        var self = this;

        self.updateSkill = function(skill, sliderValue) {
            SkillsService.updateSkill(skill, sliderValue);
        };

        self.pointsRemaining = function() {
            return SkillsService.pointsRemaining();
        };
    });