如何在 angular-material 中实现 ng-class 到 md-chip

Question

这是我的问题 - 我无法将 ng-class='{activeTag: $chip.active}' 实现到 <md-chip></md-chip>。我曾尝试将此指令添加到 <md-chips></md-chips> 但它不起作用（因为 $chip 不在当前范围内）。我也可以将此 ng-class 添加到 md-chip-template 但在视觉上这不是我想要的，我需要标签中所有内容的背光。顺便说一句，<md-chip></md-chip> 在 md-chips 指令中动态创建。也许有人遇到过这个问题或者只是知道解决方案。谢谢。

这是我的控制器

controller('ChipsController', function($scope) {
    $scope.tags = [
      {
        id: 1,
        name: 'Pop',
        active: false
      },
      {
        id: 2,
        name: 'Rock',
        active: true
      },
      {
        id: 3,
        name: 'Reggie',
        active: false
      }
  ];

});

我的看法

<md-chips class="custom-chips selected" ng-model="tags" readonly="true">
<md-chip-template ng-class="{'activeTag': $chip.active}" style="cursor: pointer;">
  <a ui-sref="">
    <strong>{{$chip.id}}</strong>
    <em>({{$chip.name}})</em>
  </a>
</md-chip-template>

我的css

.activeTag {
  background: rgba(85, 107, 47, 0.66) !important;
  color: white !important; 
}

Here is the plunker

Answer 1

我可能更喜欢使用自定义指令，它将特殊的 class 添加到您的 chip

.directive('myChip', function(){
    return {
        restrict: 'EA',
        link: function(scope, elem, attrs) {
            var myChip = elem.parent().parent();
            myChip.addClass('_active');

            scope.$watch(function(){
                return scope.$chip.active
            }, function(newVal){
                if (newVal) {
                  myChip.addClass('_active');
                } else {
                  myChip.removeClass('_active');
                }
            })

        }
    }
})

模板

<md-chip-template ng-class="{'activeTag': $chip.active}" style="cursor: pointer;" my-chip>

样式

.md-chip._active {
  background: rgba(85, 107, 47, 0.66) !important;
  color: white !important;
}

http://plnkr.co/edit/vv2SvH1gNj3OIh1oaqvV?p=preview

如何在 angular-material 中实现 ng-class 到 md-chip

How to implement ng-class to md-chip in angular-material

javascript

css

angularjs

angular-material

md-chip