Wie übergebe ich Parameter an ein Modal?

Ich möchte die userNameaus einer Liste der userNameangemeldeten Benutzerklicks an den Twitter-Bootstrap weiterleiten modal. Ich verwende Grails mit AngularJs , bei denen Daten über AngularJs gerendert werden .

Aufbau

Meine Grals-Ansichtsseite encouragement.gspist

<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.gspist

<div id="encouragementModal" class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"
      aria-hidden="true">&times;</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 userNamezu encouragementModal?

Um den Parameter zu übergeben, müssen Sie die Elemente auflösen und in den Controller einfügen

$scope.Edit = function (Id) {
   var modalInstance = $modal.open({
      templateUrl: '/app/views/admin/addeditphone.html',
      controller: 'EditCtrl',
      resolve: {
         editId: function () {
           return Id;
         }
       }
    });
}

Nun, wenn Sie wie folgt verwenden:

app.controller('EditCtrl', ['$scope', '$location'
       , function ($scope, $location, editId)

In diesem Fall ist editId undefiniert. Sie müssen es wie folgt injizieren:

app.controller('EditCtrl', ['$scope', '$location', 'editId'
     , function ($scope, $location, editId)

Jetzt wird es reibungslos funktionieren, ich habe viele Male das gleiche Problem, sobald es injiziert ist, fängt alles an zu funktionieren!

Der andere funktioniert nicht. Laut den Dokumenten sollten Sie dies so tun.

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal) {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      resolve: {
        test: function () {
          return 'test variable';
        }
      }
    });
};

var ModalInstanceCtrl = function ($scope, $modalInstance, test) {

  $scope.test = test;
};

Siehe plunkr

Alternativ können Sie einen neuen Bereich erstellen und Parameter über die Option scope übergeben

var scope = $rootScope.$new();
 scope.params = {editId: $scope.editId};
    $modal.open({
        scope: scope,
        templateUrl: 'template.html',
        controller: 'Controller',
    });

Wenn Sie Ihren modalen Controller in $ scope übergeben, müssen Sie dann nicht und itemsProvider oder eine von Ihnen benannte Lösung übergeben

modalController = function($scope) {
    console.log($scope.params)
}

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.

 $scope.openMyModalView = function() {
            var modalInstance = $modal.open({
                    templateUrl: 'app/userDetailView.html',
                    controller: 'UserDetailCtrl as userDetail'
                });
                // add your parameter with modal instance
                modalInstance.userName = 'xyz';
        };

Modal Controller:

angular.module('myApp').controller('UserDetailCtrl', ['$modalInstance',
                function ($modalInstance) {
                    // get your parameter from modal instance
                    var currentUser = $modalInstance.userName;
                    // do your work...
                }]);

Ich habe es wie unten versucht.

Ich habe ng-clickden AngularJS-Controller über die Schaltfläche " Ermutigen" angerufen .

               <tr ng-cloak
                  ng-repeat="user in result.users">
                   <td>{{user.userName}}</rd>
                   <td>
                      <a class="btn btn-primary span11" ng-click="setUsername({{user.userName}})" href="#encouragementModal" data-toggle="modal">
                            Encourage
                       </a>
                  </td>
                </tr>

Ich habe userNamevon encouragementModalvon AngularJS Controller.

    /**
     * Encouragement controller for AngularJS
     * 
     * @param $scope
     * @param $http
     * @param encouragementService
     */
    function EncouragementController($scope, $http, encouragementService) {
      /**
       * set invoice number
       */
      $scope.setUsername = function (username) {
            $scope.userName = username;
      };
     }
    EncouragementController.$inject = [ '$scope', '$http', 'encouragementService' ];

Ich habe einen Platz ( userName) angegeben, um den Wert vom AngleJS-Controller einzuschalten encouragementModal.

<div id="encouragementModal" class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"
      aria-hidden="true">&times;</button>
    <h3>Confirm encouragement?</h3>
  </div>
  <div class="modal-body">
      Do you really want to encourage <b>{{userName}}</b>?
  </div>
  <div class="modal-footer">
    <button class="btn btn-info"
      ng-click="encourage('${createLink(uri: '/encourage/')}',{{userName}})">
      Confirm
    </button>
    <button class="btn" data-dismiss="modal" aria-hidden="true">Never Mind</button>
  </div>
</div>

Es hat funktioniert und ich habe mich begrüßt.

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:

var d = $dialog.dialog({
  backdrop: true,
  keyboard: true,
  backdropClick: true,
  templateUrl:  '<url_of_your_template>',
  controller: 'MyDialogCtrl',
  // Interesting stuff here.
  resolve: {
    username: 'foo'
  }
});

d.open();

Und in Ihrem Dialog-Controller:

angular.module('mymodule')
  .controller('MyDialogCtrl', function ($scope, username) {
  // Here, username is 'foo'
  $scope.username = username;
}

BEARBEITEN: Seit der neuen Version des UI-Dialogs lautet der Auflösungseintrag:

resolve: { username: function () { return 'foo'; } }

Sie können einfach eine Controller-Funktion erstellen und Ihre Parameter mit dem $ scope-Objekt übergeben.

$scope.Edit = function (modalParam) {
var modalInstance = $modal.open({
      templateUrl: '/app/views/admin/addeditphone.html',
      controller: function($scope) {
        $scope.modalParam = modalParam;
      }
    });
}

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.

angular.module('yourApp', []).
directive('myModal',
       ['$rootScope','$log','$compile',
function($rootScope,  $log,  $compile) {
    var _scope = null;
    var _element = null;
    var _onModalShow = function(event) {
        _element.after($compile(event.target)(_scope));
    };

    return {
        link: function(scope, element, attributes) {
            _scope = scope;
            _element = element;
            $(element).on('show.bs.modal',_onModalShow);
        }
    };
}]);

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.

<div my-modal id="encouragementModal" class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"
      aria-hidden="true">&times;</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>