javascript - 使用 Angular Directive(指令)中的参数在 css 中动态转换

Question

我正在构建一个带圆圈的进度指示器。圆是用 Angular Directive(指令)构建的，进度级别作为参数传递给指令，其中值是用 Angular 重复提取的。

问题是尽管传递了不同的值，但所有进度级别都获得了相同的值。

要设置更新进度级别，我首先尝试使用 jquery .css 函数，如下所示，它为所有进度级别提供相同的值

$(this).find('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');

然后我尝试将带有 ng-style 的进度嵌入到模板中，这也没有用，因为所有进度级别相同。

<div class="ppc-progress-fill" ng-style="{'transform': 'rotate('+deg+'deg)', '-webkit-transform': 'rotate('+deg+'deg)', '-ms-transform': 'rotate('+deg+'deg)'}"></div>

这是代码的相关部分

AppModule.directive("skillWidget", function(){
    var linkFunction = function(scope, element, attributes){
      //console.log(attributes);
       scope.text = attributes["text"]; 
       scope.percent = attributes["percent"];

       percent = parseInt(scope.percent),
         deg = 360*percent/100;

         //console.log($(this).find('.ppc-progress-fill'));

        $(this).find('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');

        //$('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');

    }; 

    return {
      restrict: "E",
      templateUrl:"views/skillTemplate.html",
      link: linkFunction,
      scope: {
        text: "@text",
        percent : "@percent"
      }
    }
});

这是模板:

<div class="progress-pie-chart"><!--Pie Chart -->
                    <div class="ppc-progress">
                        <div class="ppc-progress-fill" ng-style="{'transform': 'rotate('+deg+'deg)', '-webkit-transform': 'rotate('+deg+'deg)', '-ms-transform': 'rotate('+deg+'deg)'}"></div>
                    </div>
                    <div class="ppc-percents">
                    <div class="pcc-percents-wrapper">                 
                        <span>{{text}}</span>
                    </div>
</div>

我错过了什么？

更多信息:圆形进度条是基于这个例子http://codepen.io/shankarcabus/pen/GzAfb .

Answer 1

在我看来你所要做的就是:

• 创建一个函数 scope.deg 来为您的 View 提供 deg 值
• 将普通样式属性应用于 View 中的 ppc-progress-fill，但使用我们在下面创建的 deg() 函数来执行转换。
• 删除所有 jquery 代码

我为您创建了这个 plunkr http://embed.plnkr.co/tzPVwVue8Jhi1iIvUMJ7/preview .它没有任何样式，但我使用图像作为 ppc-progress-fill 的背景，因此在 div 旋转时更容易注意到。请注意，如果您更改其中的百分比，AngularJs Logo 将旋转 ;)。

我通常尝试将表示层(HTML 和 CSS)与代码分开，在本例中是指令代码。如果我正在使用 AngularJs，请不要使用 jQuery，如果没有它，您通常倾向于使用 jQuery 做的大部分事情都可以完成。这帮助我更快地切换到 AngularJs。

编码愉快!

ps:如果您下次能提供一个有效的代码片段/jsfiddle/plunkr/等，那就太好了，这样我们就可以更轻松地帮助您找到解决方案。 ;)