jquery - AngularJS を使用して Element にクラスを動的に追加する

Question

JQueryを使用して行ったことを模倣したいAngularJS。

以下はそのためのフィドルです。

ここでやったことは3つ。

1. 右の列の最後の要素を見つけます。
2. そこから属性「data-color」をピックアップ
3. 属性の値をクラスとして「right-col」に割り当てます

Answer 1

これは、次のように、angular'js ディレクティブ (再利用可能なコンポーネント) によって実行できます。また、angular には jqlite (jQuery ライブラリ) があります。

ディレクティブ:

app.directive('dynamicColor',dynamicColor);

    dynamicColor.$inject = [];

    function dynamicColor(){

      return{
        restrict:'A',
        link:function(scope,element,attrs){
          element.css('background-color',attrs.dynamicColor);
        }
      }

    }

https://plnkr.co/edit/Op5fI5oFQku07tkebBcg?p=preview

Answer 2

この JSFiddle を試してください: https://jsfiddle.net/ubqrah1w/

angular ディレクティブを使用します。

.directive('lastColor', function () {
  return {
    restrict: 'A',
    link: function ($scope, $element, $attrs) {
    $element.addClass(angular.element($element[0].querySelector('.items:last-child')).attr('data-color'));
    }
  }
  });