Problemi di ambito con modal UI angular

Ho difficoltà a comprendere / utilizzare gli ambiti per un modale UI angular.

Anche se non è immediatamente evidente qui, ho i moduli e tutto configurato correttamente (per quanto posso dire), ma questi esempi di codice in particolare sono dove trovo il bug.

index.html (la parte importante di esso)

 

Controller.js (di nuovo, la parte importante)

 MyApp.controller('AppListCtrl', function($scope, $modal){ $scope.name = 'New Name'; $scope.groupType = 'New Type'; $scope.open = function(){ var modalInstance = $modal.open({ templateUrl: 'partials/create.html', controller: 'AppCreateCtrl' }); modalInstance.result.then(function(response){ // outputs an object {name: 'Custom Name', groupType: 'Custom Type'} // despite the user entering customized values console.log('response', response); // outputs "New Name", which is fine, makes sense to me. console.log('name', $scope.name); }); }; }); MyApp.controller('AppCreateCtrl', function($scope, $modalInstance){ $scope.name = 'Custom Name'; $scope.groupType = 'Custom Type'; $scope.ok = function(){ // outputs 'Custom Name' despite user entering "TEST 1" console.log('create name', $scope.name); // outputs 'Custom Type' despite user entering "TEST 2" console.log('create type', $scope.groupType); // outputs the $scope for AppCreateCtrl but name and groupType // still show as "Custom Name" and "Custom Type" // $scope.$id is "007" console.log('scope', $scope); // outputs what looks like the scope, but in this object the // values for name and groupType are "TEST 1" and "TEST 2" as expected. // this.$id is set to "009" so this != $scope console.log('this', this); // based on what modalInstance.result.then() is saying, // the values that are in this object are the original $scope ones // not the ones the user has just entered in the UI. no data binding? $modalInstance.close({ name: $scope.name, groupType: $scope.groupType }); }; }); 

create.html (nella sua interezza)

    

Quindi, la mia domanda è la seguente: perché lo scopo non è il doppio legame all’interfaccia utente? e perché this ha i valori personalizzati, ma $scope no?

Ho provato ad aggiungere ng-controller="AppCreateCtrl" al div body in create.html, ma questo ha generato un errore: “Provider sconosciuto: $ modalInstanceProvider <- $ modalInstance" quindi non ci sono fortuna.

A questo punto, la mia unica opzione è di restituire un object con this.name e this.groupType invece di usare $scope , ma questo sembra sbagliato.

Ho fatto lavorare il mio in questo modo:

 var modalInstance = $modal.open({ templateUrl: 'partials/create.html', controller: 'AppCreateCtrl', scope: $scope // <-- I added this }); 

Nessun nome di modulo, nessun $parent . Sto usando AngularUI Bootstrap versione 0.12.1.

Sono stato informato su questa soluzione.

Quando sono coinvolti gli ambiti nidificati, non associare s direttamente ai membri dell’ambito:

   

Legarli ad almeno un livello più profondo:

   

Il motivo è che gli ambiti ereditano prototipicamente il loro ambito genitore. Quindi, quando si impostano i membri di primo livello, questi vengono impostati direttamente sull’oscilloscopio secondario, senza influenzare il genitore. Al contrario, quando si form.name il binding ai campi nidificati ( form.name ) il form membro viene letto dall’ambito genitore, quindi l’accesso alla proprietà name accede alla destinazione corretta.

Leggi una descrizione più dettagliata qui .

Aggiornamento novembre 2014 :

In realtà il tuo codice dovrebbe funzionare dopo l’aggiornamento a ui-bootstrap 0.12.0. L’ambito escluso viene fuso con l’ambito del controllore quindi non è più necessario disporre di $parent o di form. cose.

Prima di 0.12.0 :

Il modale usa la transclusione per inserire il suo contenuto. Grazie a ngForm puoi controllare l’ambito per attributo name . Quindi per evitare l’ambito transcluso basta modificare la forma in questo modo:

 

o

 

I dati del modello saranno disponibili nell’ambito del controller.

 $scope.open = function () { var modalInstance = $uibModal.open({ animation: $scope.animationsEnabled, templateUrl: 'myModalContent.html', controller: 'salespersonReportController', //size: size scope: $scope }); }; 

funziona per me scope: $ scope grazie a Jason Swett

Aggiungo scope: $ scope quindi funziona .Cool