2017-03-03 2 views
0

Es gibt eine App, die Bootstrap Angular UI mit einer Variablen $scope.companies verwendet. Beim Klicken auf eine Schaltfläche öffnet sich ein erstes Modal Open, in dem die Firmen aus dieser Variablen in einem select Element angezeigt werden.Angularjs und BootstrapUI - Wie man die Variable in einem Modal basierend auf Änderungen in einem anderen aktualisiert

Der Benutzer kann klicken Fügen Sie eine neue Firma Schaltfläche, um eine neue, zweite, modale (oben auf der vorhandenen) zu öffnen, wo er eine neue Firma erstellen kann.

Beim Schließen dieses zweiten Modales kehrt der Benutzer zum ersten zurück, wobei jedoch die Firmen im Element select nicht mit der neuen Firma aktualisiert werden, die gerade erstellt wurde.

Meine Frage ist - wie aktualisiert man das erste Modal, so dass es die Änderungen an $scope.companies widerspiegelt und dass neue Firma im Select-Element verfügbar ist?

In der Hauptsteuerung ich eine Fabrik verwenden (‘sharedCompanies), um die Unternehmen zu erhalten:

sharedCompanies.getCompanies().then(function(data){ 
    $scope.companies = data; 
} 

als, jedes Mal, wenn ich eine neue modale öffne ich etwas tun, wie dieses Geltungs es so vorbei :

In jedem modalen kann ich auf $scope.companies zugreifen und sie werden korrekt angezeigt. Das neue Unternehmen wurde erfolgreich erstellt, aber damit es im Element select sichtbar ist, muss ich die Modals schließen und sie wieder öffnen ...

Wie aktualisiere ich die $scope.companies Variable in diesen Modal, nachdem ein neues Element wurde hinzugefügt?

+0

Wie fügen Sie die neue Firma hinzu? – Ladmerc

Antwort

0

Danke für die Kommentare der zweite modalen schieben Schließen! Mit Ihrer Hilfe habe ich das Problem diagnostiziert: Ich habe nicht die richtigen Daten aus dem Modal zurückgegeben! Was hinzugefügt werden musste, war dies etwas Linie in der zweiten modalen:

newCompanyModalInstance.result.then(function (data) { 
     $scope.companies = data.companies; 
    }); 

Das ist mein Problem gelöst:

$http.post(addNewCompanyAndServicesApiURL, data) 
     .then(function successCallback(response) { 
      $scope.companies.push(response.data); 
      $uibModalInstance.close({ 
       companies:$scope.companies, 
      }); 
     }, function errorCallback(response){ 
      //... 
     }); 

und dieser Teil in der ersten modalen die Antwort von diesem zweiten zu fangen! :)

0

Im zweiten modalen nach einem neuen Unternehmen, bevor die Daten von neu hinzugekommenen Unternehmen in $scope.companies mit $scope.companies.push(newlyCreatedCompany)

+0

Das ist, was ich bereits in meinem Code habe. Was ich vermisst habe, war, wie ich Daten von diesem Modal zum vorherigen Bereich zurückgebracht habe! Danke für deinen guten Vorschlag! – user1544500

Verwandte Themen