Directive is not reading my ng-repeat attribute correctly

Question

I have a progress bar animate directive.. I want to put it inside ng-repeat. and there I want to give the directive a value to animate the progress load.. the problem that if I put data-value={{phase.completion}} angular raise an error that it cannot read such value..

Directive

appDirectives.directive('snProgressAnimate', ['$timeout', function ($timeout) {

    return {
        link: function (scope, $el) {

            var value=$el.data('value'),
            $bar = $el.find('.progress-bar');
            $bar.css('opacity', 0);
            $timeout(function(){
                $bar.css({
                    transition: 'none',
                    width: 0,
                    opacity: 1
                });
                $timeout(function () {

                    $bar.css('transition', '').css('width', value + '%');
                })
            })
        }
    }
}]);

HTML

<div class="row progress-stats" ng-repeat="phase in project.phases">
  <div class="col-sm-9">
    <h5 class="name">{{phase.name}}</h5>
    <p class="description deemphasize">{{phase.description}}</p>
    <div data-progressbar data-sn-progress-animate data-value="{{phase.completion}}" class="progress-sm bg-white"></div>
  </div>
  <div class="col-sm-3 text-align-center">
    <span class="status rounded rounded-lg bg-body-light">
      <small><span data-animate-number>{{phase.completion}}</span>%</small>
      </span>
    </div>
  </div>

I've tried to put the completion value like this : data-valye="phase.completion" but it is rendered as 'phase.completion'...

Note that in the other directive animate-number the phase.completion value is loaded correctly... this is the animate number directive:

appDirectives.directive('animateNumber', ['scriptLoader', function(scriptLoader){
    return {
        link: function (scope, $el){
            function render(){
                $el.animateNumber({
                    number: $el.text().replace(/ /gi, ''),
                    numberStep: $.animateNumber.numberStepFactories.separator(' '),
                    easing: 'easeInQuad'
                }, 1000);
            }

            scriptLoader.loadScripts(['vendor/jquery-animateNumber/jquery.animateNumber.min.js'])
                .then(render)
        }
    }
}]);

The only way to load the value in the first directive is by accessing the scope that is passed to the directive like this

var value = scope.phase.completion;

.. but I guess this is not the correct behavior..

any help??

Answer 1

return {
    **scope:{value:'='},**
    link: function (scope, $el) {
        **console.log(value);**

        //var value=$el.data('value'),
        $bar = $el.find('.progress-bar');
        $bar.css('opacity', 0);
        $timeout(function(){
            $bar.css({
                transition: 'none',
                width: 0,
                opacity: 1
            });
            $timeout(function () {

                $bar.css('transition', '').css('width', value + '%');
            })
        })
    }
}