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

Vous devriez vraiment utiliser Angular UI pour ces besoins. Jetez-y un coup d'œil : Dialogue Angular UI

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

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 l'ui-dialog, l'entrée resolve devient :

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

Answer 2

Vous pouvez simplement créer une fonction de contrôleur et passer 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;
      }
    });
}

Answer 3

Si vous n'utilisez pas AngularJS UI Bootstrap, voici comment j'ai procédé.

J'ai créé une directive qui retiendra tout l'élément de votre modale, et recompilera l'élément 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 à l'intérieur de la portée de votre contrôleur, alors ajoutez une directive my-modal à votre modèle. Si vous avez enregistré l'utilisateur cliqué dans $scope.aModel le modèle original fonctionnera maintenant.

Remarque : L'ensemble du champ d'application est maintenant visible dans votre modale, ce qui vous permet d'accéder également à l'information suivante $scope.users en elle.

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