Question

我有一个进度条动画指令..我想把它放在ng-repeat中。在那里我想给指令一个值来设置进度负载的动画..如果我把data-value = {{phase.completion}} angular的问题引发了一个错误，它无法读取这样的值..

指令

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>

我试图将完成值设置为：data-valye =“phase.completion”但它被渲染为'phase.completion'...

请注意，在另一个指令animate-number中，phase.completion值正确加载...这是animate number指令：

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)
        }
    }
}]);

在第一个指令中加载值的唯一方法是访问传递给指令的作用域，如下所示

var value = scope.phase.completion;

..但我想这不是正确的行为..

任何帮助??

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 + '%');
            })
        })
    }
}

指令没有正确读取我的ng-repeat属性

1 个答案: