Come passare i parametri a un modale?

Voglio passare il userNameda un elenco di userNamesa che l'utente ha effettuato l'accesso al bootstrap di Twitter modal. Sto usando graal con angularjs , dove i dati vengono resi tramite angularjs .

Configurazione

La mia pagina di visualizzazione dei Graal encouragement.gspè

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

Il mio encourage/_encouragement_modal.gspè

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

Allora, come posso passare userNamea encouragementModal?

Per passare il parametro è necessario utilizzare la risoluzione e inserire gli elementi nel controller

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

Ora se utilizzerai in questo modo:

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

in questo caso editId non sarà definito. Devi iniettarlo, in questo modo:

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

Ora funzionerà senza problemi, devo affrontare lo stesso problema molte volte, una volta iniettato, tutto inizia a funzionare!

L'altro non funziona. Secondo i documenti questo è il modo in cui dovresti farlo.

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

Vedi plunkr

In alternativa è possibile creare un nuovo ambito e passare attraverso i parametri tramite l'opzione scope

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

Nel tuo controller modale passa in $ scope, quindi non è necessario passare e itemsProvider o qualsiasi altra soluzione che hai chiamato

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

Puoi anche passare facilmente i parametri al controller modale aggiungendo una nuova proprietà con l'istanza di modal e portarlo al controller modale. Per esempio:

Di seguito è riportato il mio evento clic su cui desidero aprire la visualizzazione 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';
        };

Controller modale:

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

Ho provato come di seguito.

Ho chiamato il ng-clickcontroller angularjs sul pulsante Incoraggia ,

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

Ho impostato userNamesu encouragementModalda 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' ];

Ho fornito un place ( userName) per ottenere valore dal controller angularjs 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>

Ha funzionato e mi sono salutato.

Dovresti davvero usare l'interfaccia utente angolare per queste esigenze. Check it out: Angular UI Dialog

In poche parole, con la finestra di dialogo dell'interfaccia utente angolare, puoi passare una variabile da un controller al controller di dialogo utilizzando resolve. Ecco il tuo controller "da":

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

E nel controller di dialogo:

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

EDIT: dalla nuova versione dell'interfaccia utente, la voce di risoluzione diventa:

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

Puoi semplicemente creare una funzione controller e passare i tuoi parametri con l'oggetto $ scope.

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

Se non stai usando AngularJS UI Bootstrap, ecco come l'ho fatto.

Ho creato una direttiva che manterrà l'intero elemento del tuo modal e ricompilo l'elemento per iniettare il tuo ambito in esso.

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

Presumo che il tuo modello modale sia all'interno dell'ambito del tuo controller, quindi aggiungi la direttiva my-modal al tuo modello. Se hai salvato l'utente su cui è stato fatto clic in $ scope.aModel , il modello originale ora funzionerà.

Nota: l'intero ambito è ora visibile al tuo modal, quindi puoi anche accedere a $ scope.users al suo interno.

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