晶片的角度的，动态的颜色

Question

它需要以编程的方式将芯片的颜色设置为棱角材料。

假设每个芯片显示一个定义为：

{
  name: 'the name',
  active: true
}

如果没有激活，芯片应该是灰色的，如果是的话，应该是红色的。要做到这一点，显而易见的办法是：

<md-chips ng-model="data.items" readonly="true">
  <md-chip-template ng-class="$chip.active ? 'active' : ''">
    {{$chip.name}}
  </md-chip-template>
</md-chips>

但这行不通。它只会给芯片内部涂上颜色。它实际上并不修改md-chip标记，只修改其中的md-chip-template。

那么为什么不使用静态芯片呢？我可以做：

<md-chips ng-model="data.items" readonly="true">
  <md-chip ng-repeat="chip in data.items" ng-class="$chip.active ? 'active' : ''">
    {{chip.name}}
  </md-chip>
</md-chips>

但这也行不通。您不能在ng-repeat中使用ng-chips。它只会删除你试图重复的一切。

所以我想到了这个主意。使用一个指令，它将在更改时更新其元素的父元素！

<md-chips ng-model="data.items" readonly="true">
  <md-chip-template ng-class="$chip.active ? 'active' : ''" chip-style>
    {{$chip.name}}
  </md-chip-template>
</md-chips>

指令chipStyle应该在其模型更改时使用标记md-chip查找其父程序，并将其复制到它是否具有active样式。

这是个好主意吗即使是这样，当data.items数组更改时，我也无法调用绑定到指令的函数。

我想做的事有可能吗？如果是的话，我怎么做呢？

其思想是，当data.item[someIndex].active在$apply上更改时，md-chip的类(而不是md-chip-template!)也变了。当然，这一定是可能的！

要运行的函数如下所示：

if (element.hasClass('active')) {
  element.parents('md-chip').addClass('active');
} else {
  element.parents('md-chip').removeClass('active');
}

但是当数据变化时，我不能自动调用它！

Answer 1

如果我正确地理解了你的问题，那么你可以用指令做你想做的事情，但我同意这有点复杂。

我能做到的方法：

<md-chips ng-model="chips" readonly="true">
  <md-chip-template is-active active="{{$chip.active}}">
    <b>{{$chip.name}}</b>
  </md-chip-template>
</md-chips>

isActive 指令

app.directive('isActive', function() {
    var directive = {
        restrict: 'A',
        link: link
    };

    function link(scope, el, attrs) {
      attrs.$observe('active', function(val) {
        if (val === 'true')
          el.parent().parent().addClass('active');
        else
          el.parent().parent().removeClass('active');
      });
    }

    return directive;
});

Codepen演示：我使用$timeout来改变前两个芯片的active状态，仅仅是为了仿真您确实可以改变它，并改变它们的背景。