Ich entwickle eine App, die mit einem "Widget-Layout" funktioniert.Angular Material MD-Chips nicht korrekt aktualisieren
Der Benutzer erhält eine Seite, die ein Armaturenbrett mit verschiedenen Widgets ist er mit, wie eine Tabelle in Wechselwirkung treten kann, Grafiken usw.
Ich füge einen globalen„Filter“<md-chips>
verwendet wird, das Ziel Dies ist mit freigegebene von allen Widgets und kann von allen Widgets aktualisiert werden.
Meine Filterliste verwendet <md-chips>
, mit schreibgeschütztem und md-removable-Set auf True
. So können Filter nur gelöscht oder durch Interaktion mit den Widgets hinzugefügt werden (also nur programmgesteuert hinzugefügt).
Einer der Eigenschaft dieses „Modul“ ist ein neuen Filter auf einem Feld hinzuzufügen, wenn ein Graph Element geklickt wird.
Beispiel:
Hier ist die Liste meiner Filter vor
nun ein Graph Element klicken ich auf einem Graph Element klicken, die in einem Child-Controller meines Filter-Controller ist, wird es $emit
ein Ereignis an den globalen Controller zu sagen: "Ich möchte die Filter aktualisieren! Hier ist der Filter hinzufügen"
Und der Filter Controller wird das sogar bekommen t und Update seine Filter entsprechend ($scope.tags
ist die Liste der Filter und die in <md-chips>
verwendeten Modell)
// 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 !");
});
An diesem Punkt ich das <md-chips>
Element zu aktualisieren erwarten würde, weil $scope.tags
habe gerade einen neuen Filter:
<md-chips
ng-model="tags"
readonly="readOnly"
md-removable="removable"
id="filters">
<md-chip-template>{{$chip.value}}</md-chip-template>
</md-chips>
Aber stattdessen passiert nichts! und der komische Teil ist, es erfrischt sich, wenn ich auf einen der vorhandenen Chips klicke (ich hatte einen "Test" -Chip)!
TESTS: Also, wenn ich einen Testchip auf dem Array schieben vor dem Rendern:
$scope.tags.push({field: "testField", value: "test"});
und klicken Sie auf eine Reihe von Grafikelementen, $scope.tags
perfekt aktualisiert wird, aber die Visual bleibt gleich, bis ich den Chip "Test" wählen, dann erscheinen alle <md-chips>
genau so, wie es ausgelöst, einige Refresh-Funktion.
Jeder Hinweis auf, warum das <md-chips>
Element als $scope.tags
(dessen Modell) nicht aktualisiert wird, aktualisiert BUT aktualisiert wird, wenn ein Chip ausgewählt ist?
Ich versuchte md-on-select
-Kraft dieses Verhalten auslösen, jedesmal wenn ich hinzufügen, um einen neuen Filter $scope.tags
aber ich bisher kein Glück bekam passieren!
Danke fürs Lesen!
HINWEIS: Ich verwende die neueste Version von Angular MATERIAL (HEAD MASTER) siehe Dokument hier: https://material.angularjs.org/HEAD/ | aus dem GitHub-Repository erstellt.
EDIT: Das Problem kommt von $$ HashKey nicht auf die Objekte hinzugefügt werden, werden sie nur hinzugefügt, wenn ich auf einem der vorhandenen Tags klicken, ich brauche einen Weg zu finden, diese hinzufügen $$ HashKey Attribut, wenn ich hinzufügen, einen neuen Filter