Невозможно разрешить атрибут в директиве из области корня

Question

Это должно быть легко, но я боролся с этим.

<progress-bar complete="5%" steps="$root.organizationSteps" current='1'></progress-bar>

Мне нужно добавить класс ul.steps, что это походит steps-4, если есть 4 шага, или steps-3 если есть 3. Я не могу понять, как определить, сколько шагов есть. Я пробовал использовать scope: {steps: '&'} без везения.

directive('progressBar', function() { 
    return { 
     scope: false, 
     replace: true, 
     restrict: 'E', 
     template: function(el, attrs) { 
      var html = '<div class="progressBar"><div class="contentProgress"><div></div></div>'; 
      if (angular.isDefined(attrs.steps)) { 
       html += '<ul class="steps">'; 
        html += '<li ng-repeat="step in '+attrs.steps+'" ng-class="{current: $index == '+(attrs.current-1)+'}">{{ step }}</li>'; 
       html += '</ul>'; 
      } 
      return html+'</div>'; 
     }, 
     link: function (scope, element, attrs) { 
      var config = { 
        tooltip: "N", 
        color: "G" 
       }, 
       bar = element.find('div'), 
       stepEl = element.find('.steps'); 

      if (angular.isDefined(stepEl)) { 
       stepEl.addClass("steps-"+attrs.total); 
      } 

      if (typeof attrs.color != 'undefined') 
       config.color = attrs.color[0]; 

      if (typeof attrs.complete != 'undefined') 
       bar.css('width', attrs.complete); 

      bar 
       .addClass("bar"+config.color.toUpperCase()) 
       .addClass('tip'+config.tooltip); 
     } 
    } 
}) 

Answer 1

Вы не используете $root ссылку, если элемент определен на rootscope или Infact в любой области. Если organizationSteps определено над rootScope, вы можете ссылаться на него где угодно, привязывая переменную organizationSteps. Это

if (angular.isDefined(attrs.steps)) { 
       html += '<ul class="steps">'; 
        html += '<li ng-repeat="step in '+attrs.steps+'" ng-class="{current: $index == '+(attrs.current-1)+'}">{{ step }}</li>'; 
       html += '</ul>'; 
      } 

должен быть

  html += '<ul class="steps">'; 
       html += '<li ng-repeat="step in organizationSteps" ng-class="{current: $index == '+(attrs.current-1)+'}">{{ step }}</li>'; 
      html += '</ul>'; 

Если вы хотите использовать изолированную сферу использования области видимости свойства, то HTML должен быть

<progress-bar complete="5%" steps="organizationSteps" current='1'></progress-bar>

Ваше определение директива будет иметь

scope: {steps:'='}

Вы можете обратиться к этой переменной steps в повторение.