javascript - 如何在隔离范围内使用 $index？

Question

我做了一个自定义指令，在输入框中设置了一个持续时间(天小时分钟)。它更像是 Expected time Taken。现在它应该正常工作了。要设置时间，您需要传递包含天、小时和分钟等键的 JSON。

我使用了隔离范围，因此在任何一页上复制它也可以。但在这种情况下，您需要为每个副本定义该 JSON。现在，如果我们知道需要制作多少份副本，那就太好了。

但现在我想制作副本，但变量是动态的，所以我尝试使用 ng-repeat 中的 $index，但我没有在我的指令中获取 $index 值，而是它未定义。

代码:

指令

angular.module('estimated',['ui.bootstrap'])

.directive('estimated',[function(){
      return {
        restrict: 'A',
        replace: true,
        transclude: 'element',
        templateUrl: 'counter.html',
        scope:{
            duration:'=time',
            visible:'=show'
        },
        controller: function($scope){

            },
        link:function(scope, element, attrs,ctrl) {

            var input = angular.element(element[0].getElementsByTagName('input'));

            input.attr('class','form-control');

            var setduration = function(){
                scope.duration;
                durationformatfunc();
            }

            var durationformatfunc = function(){
                scope.durationformat = ' ';
                if(scope.visible.indexOf('days') >= 0){
                    scope.durationformat = scope.duration.days + "d ";
                }
                if(scope.visible.indexOf('hours') >= 0){
                    scope.durationformat += scope.duration.hours + "h ";
                }

                if(scope.visible.indexOf('minutes') >= 0){
                    scope.durationformat += scope.duration.minutes + "m";
                }
                input.attr('value',scope.durationformat);
            }

            scope.preventDefault = function(e) {
                e.preventDefault();
                e.stopPropagation();
            };

            var updateduration = function(){
                durationformatfunc();
            }

            setduration(); // call first time
            scope.incrementDays = function(){
                if(scope.duration.days < 30){
                    scope.duration.days = scope.duration.days + 1;
                }
                else
                    scope.duration.hours = 0; 
            }
            scope.incrementHours = function(){
                if(scope.duration.hours < 23){
                    scope.duration.hours = scope.duration.hours + 1;
                }
                else{
                    scope.duration.hours = 0; 
                    scope.incrementDays();
                }
            }
            scope.incrementMinutes = function(){
                if(scope.duration.minutes < 55)
                    scope.duration.minutes = scope.duration.minutes + 5;
                else{
                    scope.duration.minutes = 0; 
                    scope.incrementHours();
                }
            }
            scope.decrementDays = function(){
                if(scope.duration.days == 1)
                    scope.duration.days = 30; 
                else
                    scope.duration.days = scope.duration.days - 1;
            }
            scope.decrementHours = function(){
                if(scope.duration.hours == 0){
                    scope.duration.hours = 23;
                    scope.decrementDays();
                }
                else
                    scope.duration.hours = scope.duration.hours - 1;
            }
            scope.decrementMinutes = function(){
                if(scope.duration.minutes == 0)
                    {
                    scope.duration.minutes = 55;
                    scope.decrementHours(); 
                    }
                else
                    scope.duration.minutes = scope.duration.minutes - 5;
            }

            scope.$watch('duration',function(newValue, oldValue) {
                      updateduration();
                  },true);

        }
      }
}])

有效的html

<input type="text" value="" show="['days','hours','minutes']"  time="count" estimated>

我想工作的html

<input type="text" value="" show="['days','hours','minutes']" ng-repeat="x in counts track by $index"  time="count{{$index}}" estimated>

Controller 中定义的计数

$scope.count ={
                        days:0,
                        hours:02,
                        minutes:50
                    }

Counter.html/模板

<div class="dropdown durationdiv" dropdown>
  <div class="dropdown-toggle input-group" ng-class="" dropdown-toggle>
   <div class="input-group">
    <div class="time-input" ng-transclude></div>
    <div class="input-group-addon">
        <i class="fa-clock-o fa curp"></i>
    </div>
    </div>
  </div>
  <div class="dropdown-menu" ng-click="preventDefault($event)" dropdown-menu>

    <div ng-if="visible.indexOf('days') >= 0" class="days-col pull-left">
      <div><a class="btn" ng-click="incrementDays()"><i class="fa-chevron-up fa curp"></i></a></div>
      <div class="days-val">{{ duration.days}}</div>
      <div><a class="btn" ng-click="decrementDays()"><i class="fa-chevron-down fa curp"></i></a></div>
    </div>
    <div ng-if="visible.indexOf('hours') >= 0" class="hours-col pull-left">
      <div><a class="btn" ng-click="incrementHours()"><i class="fa-chevron-up fa curp"></i></a></div>
      <div class="hours-val">{{ duration.hours }}</div>
      <div><a class="btn" ng-click="decrementHours()"><i class="fa-chevron-down fa curp"></i></a></div>
    </div>
    <div ng-if="visible.indexOf('minutes') >= 0" class="minutes-col  pull-left">
      <div><a class="btn" ng-click="incrementMinutes(e)"><i class="fa-chevron-up fa curp"></i></a></div>
      <div class="minutes-val">{{ duration.minutes }}</div>
      <div><a class="btn" ng-click="decrementMinutes()"><i class="fa-chevron-down fa curp"></i></a></div>
    </div>
  </div>
</div>

笨蛋

http://plnkr.co/edit/I3scaAkYRaK19YIjpSMz?p=preview

Answer 1

安装了这个:

time="count{{$index}}"

你能试试这样的东西吗？

time="count($index)"

编辑

在你的指令中:

scope:{
         duration:'&time',
         visible:'=show'
        },

希望对您有所帮助。