使用角度指令中的参数在css中动态转换答案

【问题标题】：Dynamically transform in css with a parameter in angular directive使用角度指令中的参数在css中动态转换
【发布时间】：2015-08-29 19:26:57
【问题描述】：

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

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

要设置更新进度级别，我首先尝试使用 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。

【问题讨论】：

标签： javascript jquery css angularjs

【解决方案1】：

在我看来，你所要做的就是：

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

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

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

编码愉快！

ps：如果您下次能提供一个可以工作的 sn-p/jsfiddle/plunkr/etc.. 那就太好了，这样我们就更容易帮助您找到解决方案。 ;)

【讨论】：

【解决方案2】：

我的猜测是 $(this).find(...) 中的 this 比你想象的要高。因此 find() 返回所有的 .ppc-progress-fill。所以 .css (...) 应用于所有这些，这就是为什么即使您输入不同的值，所有指令也会显示相同的级别。

为确保只针对与指令关联的元素，请在链接函数中使用元素属性。来自角度文档：

element 是该指令匹配的 jqLite 包装元素。

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

【讨论】：