使用 AngularJS 动态添加 class 到元素

Question

我想用 AngularJS 模仿我用 JQuery 做的事情。

下面是它的 fiddle。

我在这里做了三件事。

找到右列的最后一个元素。
从中提取属性 'data-color'
将属性的值作为 class 分配给 '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'));
    }
  }
  });

使用 AngularJS 动态添加 class 到元素

Dynamically Add class to Element using AngularJS

jquery

angularjs

angular-ng-class