javascript - Angular Material md-chips 无法正确刷新

Question

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

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

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

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

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

示例:

这是单击图形元素之前我的过滤器列表

现在，我单击过滤器 Controller 的子 Controller 中的图形元素，它将 $emit对全局 Controller 说的事件:“我想更新过滤器!这是要添加的过滤器”

过滤器 Controller 将获取该事件并相应地更新他的过滤器( $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>

但是，什么也没发生!奇怪的是，当我点击现有芯片之一时(我有一个“测试”芯片)，它会刷新!

测试:因此，当我在渲染之前将测试芯片推到阵列上时:

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

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

关于为什么 <md-chips> 的任何提示元素未刷新为 $scope.tags (其型号)已更新但是在选择芯片时更新？

我试图触发md-on-select每次我向 $scope.tags 添加新过滤器时强制发生此行为但到目前为止我还没有运气!

感谢您的阅读!

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

编辑:问题来自 $$hashKey 没有添加到对象中，它们仅在我单击现有标签之一时添加，我需要找到一种方法在添加新过滤器时添加此 $$hashKey 属性

Answer 1

当我向我的 chips ($scope.tags) 的过滤器模型添加新过滤器时，问题来自于缺少 $$hashKey。

所以我只需要改变

$scope.tags.push(filter);

至

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

这是我的console.log测试

我学到了一件好事:<md-chips>指令仅知道它需要更新如果其 <chip>对象有一个$$hashKey

参见this在范围.$apply