web-dev-qa-db-fra.com

Comment passer des paramètres à un modal?

Je souhaite transmettre la userName à partir d'une liste de userNames un utilisateur connecté clique sur Twitter bootstrap modal. J'utilise grails avec angularjs, où les données sont rendues via angularjs.

Configuration

Ma page de vue Grails encouragement.gsp est

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

Mon encourage/_encouragement_modal.gsp est

<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 à encouragementModal?

javascripttwitter-bootstrapgrailsangularjs
92
prayagupd

J'ai essayé comme ci-dessous.

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

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

Je règle userName sur 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 emplacement (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>

Cela a fonctionné et je me suis salué.

17
prayagupd

Pour transmettre le paramètre, vous devez utiliser resolir 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 utiliserez 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, tout va bien se passer, je suis souvent confronté au même problème, une fois injecté, tout commence à fonctionner!

144
Ali Adravi

L'autre ne fonctionne pas. Selon la documentation, c'est la façon dont vous devriez le 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

55
bicycle

Sinon, vous pouvez créer une nouvelle portée et passer à travers les paramètres via l'option scope

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

Dans votre pass modal controller dans $ scope, vous n’avez alors pas besoin de passer dans itemsProvider ou quoi que vous résolviez jamais.

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

Vous pouvez également facilement passer des paramètres au contrôleur modal en ajoutant une nouvelle propriété avec une instance de modal et de le transférer vers le contrôleur modal. Par exemple:

Voici mon événement de clic sur lequel je veux ouvrir la 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...
                }]);
22
Rubi saini

Vous devriez vraiment utiliser Angular UI pour ces besoins. Check it out: Dialogue d'interface utilisateur angulaire

En résumé, avec la boîte de dialogue Angular UI, vous pouvez transmettre une variable d'un contrôleur au contrôleur de boîte de dialogue à l'aide de resolve. Voici votre contrôleur "from":

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();

Et dans votre contrôleur de dialogue:

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

EDIT: Depuis la nouvelle version de la boîte de dialogue ui, l'entrée de résolution devient:

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

10
Sandro Munda

Vous pouvez simplement créer une fonction de contrôleur et transmettre vos paramètres avec l'objet $ scope.

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

Si vous n'utilisez pas AngularJS UI Bootstrap, voici comment je l'ai fait.

J'ai créé une directive qui conservera cet élément entier de votre modal et le recompilera pour y injecter votre portée.

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

Je suppose que votre modèle modal est dans la portée de votre contrôleur, puis ajoutez la directive my-modal à votre modèle. Si vous avez enregistré l'utilisateur sur lequel vous avez cliqué $ scope.aModel, le modèle d'origine fonctionnera désormais.

Remarque: La totalité de la portée est maintenant visible pour votre modal, vous pouvez donc également y accéder $ scope.users.

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