Comment passer des paramètres à une modale ?

Question

Je veux passer le userName à partir d'une liste de userName s un utilisateur connecté clique sur twitter bootstrap modal . J'utilise grails con angularjs où les données sont rendues via angularjs .

Configuration

Ma page de vue grails encouragement.gsp es

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

Mi encourage/_encouragement_modal.gsp es

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

Alors, comment puis-je passer userName a encouragementModal ?

Answer 1

Pour passer le paramètre, vous devez utiliser resolve et injecter les éléments dans le contrôleur.

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

Maintenant, si vous utilisez comme ceci :

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

dans ce cas, editId sera indéfini. Vous devez l'injecter, comme ceci :

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

Maintenant, il fonctionnera sans problème, je fais face au même problème plusieurs fois, une fois injecté, tout commence à fonctionner !

Answer 2

L'autre ne fonctionne pas. D'après la documentation, c'est comme ça qu'il faut faire.

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

Voir plunkr

Answer 3

Vous pouvez également créer un nouveau champ d'application et passer des paramètres via l'option de champ d'application.

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

Dans votre contrôleur modal, passez dans $scope, vous n'avez pas besoin de passer dans itemsProvider ou dans la résolution que vous avez nommée.

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

Answer 4

Vous pouvez aussi facilement passer des paramètres au contrôleur modal en ajoutant une nouvelle propriété à l'instance de modal et en la transmettant au contrôleur modal. Par exemple :

Voici mon événement de clic sur lequel je veux ouvrir une vue modale.

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

Contrôleur modal :

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

Answer 5

J'ai essayé comme ci-dessous.

J'ai appelé ng-click au contrôleur angularjs sur Encouragez bouton,

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

J'ai mis userName de encouragementModal à partir du contrôleur angularjs.

    /**
     * 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' ];

J'ai fourni un lieu ( userName ) pour obtenir la valeur du contrôleur angularjs sur 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>

Ça a marché et je me suis salué.