如果您打开我的链接，您会看到我有两个条形绿色和红色。
我想要的是用绿色条填充绿色和红色条之间的所有间隙。使用指令，因为我正在设置绿色和红色或稍后使用jquery。
https://plnkr.co/edit/OpExVrfuMf5YcbmU3D5g?p=preview
我的想法是，一旦我将插入绿色条我将设置变量说matchActive为true并且循环继续直到我插入红色条我将继续插入绿色条但我的scope.matchActive变量得到重置。
指令
app.directive('classset', function($window, $timeout) {
return {
restrict: 'AEC',
replace: false,
scope: {
classSetInputValueProgram: '@',
classSetInputValueDate: '@',
ClassSetOutputValue: '@' ,
matchActive: '=' // binding strategy
},
template: '<span class="{{ClassSetOutputValue}} rowbarWidth">|</span>',
link: function(scope, elm, attrs, ctrl) {
$timeout(function() {
var programdata = JSON.parse(scope.classSetInputValueProgram);
for(let i=j;i<=programdata.length;i++)
{
//if data exist
if(programdata[i])
{
if(programdata[i].scheduledDate == scope.classSetInputValueDate )
{ console.log('equal startd'+i)
console.log(programdata[i]);
scope.ClassSetOutputValue = 'activebarstarts';
scope.matchActive = true;
return true;
}
else if(programdata[i].programEndDate == scope.classSetInputValueDate)
{ console.log('equal'+i)
console.log(programdata[i]);
scope.ClassSetOutputValue = 'activebarends';
scope.matchActive = false;
return true;
}
else
{
//console.log('not equal'+i)
//scope.matchActive = true;
}
}
else
{
// console.log('not exist'+i);
// scope.ClassSetOutputValue = 'activebarstarts';
// return true;
//scope.matchActive = false;
// scope.ClassSetOutputValue = 'activebarstarts';
//return true;
}
}
},10)
}
}
});