¿Cómo pasar parámetros a un modal?

Quiero pasar el userNamede una lista de userNamelos clics de un usuario que ha iniciado sesión a twitter bootstrap modal. Estoy usando griales con AngularJS , donde los datos se hace a través de AngularJS .

Configuración

Mi página de vista de griales encouragement.gspes

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

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

Entonces, ¿cómo puedo pasar userNamea encouragementModal?

Para pasar el parámetro, debe usar resolver e inyectar los elementos en el controlador

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

Ahora, si va a usar así:

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

en este caso, editId no estará definido. Necesitas inyectarlo, así:

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

Ahora funcionará sin problemas, me enfrento al mismo problema muchas veces, una vez inyectado, ¡todo comienza a funcionar!

El otro no funciona. Según los documentos, esta es la forma en que debe hacerlo.

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

Ver plunkr

Alternativamente, puede crear un nuevo alcance y pasar parámetros a través de la opción de alcance

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

En su controlador modal, pase $ scope, entonces no necesita pasar y itemsProvider o lo que sea que lo haya llamado

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

También puede pasar parámetros fácilmente al controlador modal agregando una nueva propiedad con una instancia de modal y llevarla al controlador modal. Por ejemplo:

A continuación se muestra mi evento de clic en el que quiero abrir la vista modal.

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

Controlador modal:

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

Intenté lo siguiente.

Llamé ng-clickal controlador de angularjs en el botón Animar ,

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

Puse userNamede encouragementModaldesde AngularJS controlador.

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

Proporcioné un lugar ( userName) para obtener el valor del controlador 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>

Funcionó y me saludé.

Realmente deberías usar Angular UI para esas necesidades. Échale un vistazo: Diálogo de interfaz de usuario angular

En pocas palabras, con el diálogo de interfaz de usuario angular, puede pasar una variable de un controlador al controlador de diálogo usando resolve. Aquí está su controlador "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();

Y en su controlador de diálogo:

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

EDITAR: Desde la nueva versión del ui-dialog, la entrada de resolución se convierte en:

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

Simplemente puede crear una función de controlador y pasar sus parámetros con el objeto $ scope.

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

Si no está utilizando AngularJS UI Bootstrap, así es como lo hice.

Creé una directiva que contendrá todo ese elemento de su modal y volverá a compilar el elemento para inyectar su alcance en él.

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

Supongo que su plantilla modal está dentro del alcance de su controlador, luego agregue la directiva my-modal a su plantilla. Si guardó el usuario en el que se hizo clic en $ scope.aModel , la plantilla original ahora funcionará.

Nota: El alcance completo ahora es visible para su modal, por lo que también puede acceder a $ scope.users en él.

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