Angular Material md-chips 未正确刷新答案

【问题标题】：Angular Material md-chips not refreshing correctlyAngular Material md-chips 未正确刷新
【发布时间】：2016-06-28 10:03:55
【问题描述】：

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

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

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

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

这个“模块”的一个特点是当一个图表元素被点击时在一个字段上添加一个新的过滤器。

示例：

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

现在我点击过滤器控制器的子控制器中的图形元素，它将$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>element 会刷新，因为$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 存储库构建。

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

【问题讨论】：

标签： javascript angularjs angular-material

【解决方案1】：

当我为 chips ($scope.tags) 的过滤器模型添加一个新过滤器时，没有 $$hashKey 出现问题。

所以我只需要改变

$scope.tags.push(filter);

到

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

这是我的console.log 测试

我学到了好东西： <md-chips> 指令仅在其 <chip> 对象具有 $$hashKey

时才知道需要更新

请参阅 scope.$apply

上的this

【讨论】：