Ich möchte die userName
aus einer Liste der userName
angemeldeten Benutzerklicks an den Twitter-Bootstrap weiterleiten modal
. Ich verwende Grails mit AngularJs , bei denen Daten über AngularJs gerendert werden .
Aufbau
Meine Grals-Ansichtsseite encouragement.gsp
ist
<div ng-controller="EncouragementController">
<g:render template="encourage/encouragement_modal" />
<tr ng-cloak
ng-repeat="user in result.users">
<td>{{user.userName}}</rd>
<td>
<a class="btn btn-primary span11" href="#encouragementModal" data-toggle="modal">
Encourage
</a>
</td>
</tr>
Mein encourage/_encouragement_modal.gsp
ist
<div id="encouragementModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h3>Confirm encouragement?</h3>
</div>
<div class="modal-body">
Do you really want to encourage <b>{{aModel.userName}}</b>?
</div>
<div class="modal-footer">
<button class="btn btn-info"
ng-click="encourage('${createLink(uri: '/encourage/')}',{{aModel.userName}})">
Confirm
</button>
<button class="btn" data-dismiss="modal" aria-hidden="true">Never Mind</button>
</div>
</div>
Also, wie kann ich passieren userName
zu encouragementModal
?
javascript
twitter-bootstrap
grails
angularjs
betenagupd
quelle
quelle
Antworten:
Um den Parameter zu übergeben, müssen Sie die Elemente auflösen und in den Controller einfügen
Nun, wenn Sie wie folgt verwenden:
In diesem Fall ist editId undefiniert. Sie müssen es wie folgt injizieren:
Jetzt wird es reibungslos funktionieren, ich habe viele Male das gleiche Problem, sobald es injiziert ist, fängt alles an zu funktionieren!
quelle
Der andere funktioniert nicht. Laut den Dokumenten sollten Sie dies so tun.
Siehe plunkr
quelle
Alternativ können Sie einen neuen Bereich erstellen und Parameter über die Option scope übergeben
Wenn Sie Ihren modalen Controller in $ scope übergeben, müssen Sie dann nicht und itemsProvider oder eine von Ihnen benannte Lösung übergeben
quelle
$scope.$new(true)
einen neuen isolierten Bereich erstellen, ohne ihn injizieren zu müssen$rootScope
.resolve
) besteht darin, dass die Argumente obligatorisch sind. Jedes Mal, wenn Sie ein Modal öffnen, müssen Sie alle Argumente auflösen. Andernfalls schlägt der Aufruf von$modal.open()
fehl, da der Controller seine Argumente wünscht . Mit diesem nettenscope
Trick werden Abhängigkeiten optional.Sie können Parameter auch einfach an den Modal Controller übergeben, indem Sie eine neue Eigenschaft mit der Instanz von Modal hinzufügen und an den Modal Controller übertragen. Beispielsweise:
Es folgt mein Klickereignis, bei dem ich die modale Ansicht öffnen möchte.
Modal Controller:
quelle
Ich habe es wie unten versucht.
Ich habe
ng-click
den AngularJS-Controller über die Schaltfläche " Ermutigen" angerufen .Ich habe
userName
vonencouragementModal
von AngularJS Controller.Ich habe einen Platz (
userName
) angegeben, um den Wert vom AngleJS-Controller einzuschaltenencouragementModal
.Es hat funktioniert und ich habe mich begrüßt.
quelle
angular.copy(user)
.Sie sollten Angular UI wirklich für diese Anforderungen verwenden. Probieren Sie es aus: Angular UI Dialog
Kurz gesagt, mit dem Dialogfeld "Angular UI" können Sie mithilfe von Variablen eine Variable von einem Controller an den Dialog-Controller übergeben
resolve
. Hier ist Ihr "Von" -Controller:Und in Ihrem Dialog-Controller:
BEARBEITEN: Seit der neuen Version des UI-Dialogs lautet der Auflösungseintrag:
resolve: { username: function () { return 'foo'; } }
quelle
resolve: function(){return {username: 'foo'}}
resolve: { username: 'foo'}
Sie können einfach eine Controller-Funktion erstellen und Ihre Parameter mit dem $ scope-Objekt übergeben.
quelle
Wenn Sie AngularJS UI Bootstrap nicht verwenden, habe ich Folgendes getan.
Ich habe eine Direktive erstellt, die das gesamte Element Ihres Modals enthält, und das Element neu kompiliert, um Ihren Gültigkeitsbereich darin einzufügen.
Ich gehe davon aus, dass sich Ihre modale Vorlage im Bereich Ihres Controllers befindet, und füge dann Ihrer Vorlage die Direktive my-modal hinzu . Wenn Sie den angeklickten Benutzer in $ scope.aModel gespeichert haben , funktioniert die ursprüngliche Vorlage jetzt.
Hinweis: Der gesamte Bereich ist jetzt für Ihr Modal sichtbar, sodass Sie auch auf $ scope.users zugreifen können.
quelle