自定义逻辑内部指令

Question

如果您打开我的链接，您会看到我有两个条形绿色和红色。

我想要的是用绿色条填充绿色和红色条之间的所有间隙。使用指令，因为我正在设置绿色和红色或稍后使用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) 

                    }
                }
                });