CODEWITHSUNDEEP
javascriptangularjsangular-material
Daniel
Daniel

Reputation: 1272

Angular Material md-chips not refreshing correctly

I am developing an app that works with a "Widget layout".

The user gets a page which is a Dashboard with different widgets he can interact with, such as a table, graphs etc.

I am adding a global "filter" using <md-chips>, the objective of this is having filters that are shared by all the widgets and can be updated by all the widgets.

My Filter list uses <md-chips>, with read-only and md-removable set to True. So filters can only be deleted, or added by interacting with the widgets (so only added programmatically).

One of the feature of this "module" is to add a new filter on a field when a Graph element is clicked.

Example :

Here is my Filters list before clicking a Graph element filters empty

Now I click on a Graph element which is in a Child controller of my Filter controller, it will $emit an event to say to the global controller : "I want to update the filters ! here is the filter to add"

And the Filter Controller will get that event and update his filters accordingly ($scope.tags is the list of filters and the model used in <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 !");
  });

At that point I would expect the <md-chips>element to refresh, because $scope.tags just got a new filter :

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

But instead, nothing happens! and the weird part is, it refreshes when I click on one of the existing chip (I had a "test" chip) !

TESTS : So when I push a test chip on the array before rendering :

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

enter image description here

And click on a bunch of Graph elements, $scope.tags is perfectly updated, BUT the visual stays the same until I select the chip "test", then all the <md-chips> appear just like it triggered some refresh function.

enter image description here

Any hint on why the <md-chips> element is not refreshed as $scope.tags (its model) is updated BUT is updated when a chip is selected ?

I tried to trigger md-on-select to force this behavior to happen every time I add a new filter to $scope.tags but I got no luck so far !

Thanks for reading !

NOTE : I am using the latest version of Angular MATERIAL (HEAD MASTER) see doc here : https://material.angularjs.org/HEAD/ | built from the GitHub repository.

EDIT : The problem comes from $$hashKey not being added to the objects, they are only added when I click on one of the existing tags, I need to find a way to add this $$hashKey attribute when I add a new filter

Upvotes: 0

Views: 1668

Answers (1)

Daniel
Daniel

Reputation: 1272

The problem came from the absence of $$hashKey when I added a new filter to my filters model for my chips ($scope.tags).

So I just needed to change

$scope.tags.push(filter);

to

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

And here is my console.log test enter image description here

Good thing I learned : the <md-chips> directive only knows it needs to be updated if its <chip> objects have a $$hashKey

See this on scope.$apply

Upvotes: 2

Related Questions