2016-06-28 7 views
0

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 filters empty

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"}); 

enter image description here

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.

enter image description here

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

Antwort

1

Das Problem aus dem Fehlen von kam $$ HashKey, wenn ich einen neuen Filter zu meinen Filter Modell für meine Chips ($ scope.tags) hinzugefügt.

Also habe ich nur benötigt

$scope.tags.push(filter); 

zu

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

zu ändern Und hier ist mein console.log Test enter image description here

Gut, dass ich gelernt: die <md-chips> Richtlinie nur weiß es muss aktualisiert werden, wenn es ist <chip> Objekte haben eine $$ HashKey

Siehe this auf Umfang. Anwenden $