我已经制作了一个自定义指令，用于在输入框中设置持续时间（天数小时分钟）。这更像是预期的时间。现在它应该工作了。 要设置您需要使用天，小时和分钟等密钥传递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>
在控制器中定义的计数
$scope.count ={
days:0,
hours:02,
minutes:50
}
Counter.html / Template
<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>
PLUNKER
答案 0 :(得分：2)
注意到这一点：
time="count{{$index}}"
你能尝试这样的事吗？
time="count($index)"
修改
在你的指令中：
scope:{
duration:'&time',
visible:'=show'
},
希望它有所帮助。
答案 1 :(得分：0)
你试图传递object+$index like { days:0, hours:02, minutes:50 }1($index)所以这可能会产生问题。单独获取索引。更改下面给出的代码。
scope:{
duration:'=time',
visible:'=show',
index:'=getIndex',
},
<input type="text" value="" show="['days','hours','minutes']" ng-repeat="x in counts track by $index" get-index="{{$index + 1}}" time="count">
答案 2 :(得分：0)
谢谢你们，但我已经解决了这个问题。我改变了一种制作动态变量的方法。现在我不再制作自变量而是制作变量数组并使用$ index作为数组索引
带删除按钮的HTML
<div ng-repeat="x in counts track by $index" >
<input type="text" value="" show="['days','hours','minutes']" time="count[$index]" estimated>
<a href="" ng-click="delcount($index)">delete</a>
</div>
控制器
$scope.counts = [];
$scope.copycount = function(){
$scope.counts.push({
days:0,
hours:02,
minutes:50
});
$scope.delcount = function(i){
$scope.counts.splice(i,1);
}
$scope.counts[0] = {
days:0,
hours:02,
minutes:50
};
添加按钮
<button ng-click="copycount()">copy</button>
删除按钮
<a href="" ng-click="delcount($index)">delete</a>