Динамическое преобразование в css с параметром в угловой директиве

Question

Я строю индикатор прогресса с кругом. Где круг построен с угловой директивой, а уровень прогресса передается как аргумент в директиву, где значения извлекаются с помощью углового повторения.

проблема заключается в том, что все уровни прогресса получают одинаковое значение, несмотря на прохождение различных значений.

Для установки обновления уровня прогресса, я впервые попробовал использовать JQuery .css функцию следующим образом, что придавало одинаковое значение для всех уровней прогресса

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

Затем я попытался внедрить прогресс с нг стиль в шаблон, который также не работал, учитывая тот же уровень прогресса для всех.

<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 обеспечить град значение для вашего зрения
• Применить обычный атрибут стиля для РРС-Прогресс- заполните представление, но используя функцию deg(), которую мы создали ниже, чтобы выполнить преобразования.
• Удалить весь код JQuery

Я создал этот plunkr для вас http://embed.plnkr.co/tzPVwVue8Jhi1iIvUMJ7/preview. У него нет стилей, но я использую изображение в качестве фона для заполнения ppc-progress, поэтому его легче заметить, когда div вращается. Обратите внимание, что если вы измените процент, в нем будет вращаться логотип AngularJs;).

Обычно я стараюсь, чтобы слой презентации (HTML и CSS) был отделен от кода, в этом случае код директивы.И не использовать jQuery, если я работаю с AngularJs, большинство вещей, которые вы обычно делаете с jQuery, можно выполнить без него. Это помогло мне быстрее переключиться на AngularJs.

Счастливое кодирование!

ps: Было бы здорово, если бы вы могли предоставить рабочий фрагмент/jsfiddle/plunkr/etc .. в следующий раз, так что нам легче помочь вам найти решение. ;)

Answer 2

Я предполагаю, что это в $ (this) .find (...) является более высоким уровнем, чем вы думаете. Поэтому find() возвращает все ваши .ppc-progress-fill. Поэтому .css (...) применяется ко всем из них, поэтому все директивы отображают один и тот же уровень, даже если вы вводите разные значения.

Чтобы убедиться, что вы нацеливаете только элемент, связанный с директивой, используйте атрибут element в вашей функции ссылок. Из углового документа:

Элемент - это элемент, обернутый jqLite, который соответствует этой директиве.

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