Angular Material md-chips无法正确刷新

Question

我正在开发一个使用“Widget布局”的应用程序。

用户获取的页面是一个仪表板，其中包含可以与之交互的不同小部件，例如表格，图形等。

我正在使用<md-chips>添加全局 “过滤器”，其目标是拥有共享的过滤器所有小部件都可以被所有小部件更新。

我的过滤器列表使用<md-chips>，只读和md-removable设置为True。因此，只能通过与小部件交互来删除或添加过滤器（因此只能以编程方式添加）。

此“模块”的一个功能是在单击Graph元素时在字段上添加新过滤器。< / p>

示例：

在单击Graph元素之前，这是我的Filters列表

现在我点击我的过滤器控制器的子控制器中的Graph元素，它将$emit一个事件说给全局控制器：“我想更新过滤器！这里是过滤器添加“

过滤器控制器将相应地获取该事件并更新过滤器（$scope.tags是过滤器列表和<md-chips>中使用的模型）

  // CHIPS
  $scope.tags = [];
  $scope.readOnly = true;
  $scope.removable = true;

  // FILTER LISTENER
  $scope.$on('filterChildChanged', function (event, filter) {
    $scope.tags.push(filter);
    console.log($scope.tags);
    console.log("Parent event fired !");
  });

此时我希望<md-chips>元素可以刷新，因为$scope.tags只是有了一个新的过滤器：

<md-chips
    ng-model="tags"
    readonly="readOnly"
    md-removable="removable"
    id="filters">
    <md-chip-template>{{$chip.value}}</md-chip-template>    
</md-chips>

但相反，没有任何反应！而奇怪的部分是，当我点击其中一个现有芯片时，它会刷新（我有一个“测试”芯片）！

TESTS ： 所以当我在渲染之前在阵列上推测试芯片时：

$scope.tags.push({field: "testField", value: "test"});

然后点击一堆图形元素，$scope.tags完全更新，但视觉保持不变，直到我选择芯片“测试”，然后所有<md-chips>看起来就像触发一些刷新功能。

当<md-chips>元素未被刷新为$scope.tags（其模型）更新时的任何提示更新 BUT 会在选择芯片时更新？

每次向md-on-select添加新过滤器时，我都尝试触发$scope.tags 强制这种行为，但到目前为止我没有运气！

感谢阅读！

注意：我使用的是最新版本的Angular MATERIAL（HEAD MASTER），请参阅此处的文档：https://material.angularjs.org/HEAD/ |从GitHub存储库构建。

编辑：问题来自 $$ hashKey 没有添加到对象中，只有当我点击其中一个现有代码时才会添加它们，我需要在我添加新过滤器时找到添加此 $$ hashKey 属性的方法

Answer 1

问题来自缺少 $$ hashKey ，当我为我的筹码（$ scope.tags）添加了一个新过滤器到我的过滤器模型时。

所以我只需要改变

$scope.tags.push(filter);

到

$scope.$apply(function () {
    $scope.tags.push(filter);
});

这是我的console.log测试

我学到的好东西： <md-chips>指令只知道如果<chip>对象的 $$ hashKey

，则需要更新它

请参阅范围{$ 3}上的this。$ apply