javascript - from - pass data to modal




Pase el parámetro a modal (6)

Quiero pasar el nombre de usuario de una lista de usuario, usuario registrado, usuario, clics en twitter arranque modal . Estoy usando grails con angularjs , donde los datos se representan a través de angularjs .

Configuración

Mi página de vista de grails es 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>

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>

Entonces, ¿cómo puedo pasar userName a encouragementModal ?


Lo intenté como a continuación.

Llamé ng-click al controlador angularjs en el botón Alentar ,

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

Configuro userName of encouragementModal desde el controlador 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' ];

Proporcioné un lugar ( userName ) para obtener valor del controlador angularjs en 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é a mí mismo.


Alternativamente, puede crear un nuevo alcance y pasar a través de 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 aprobación modal de controlador en $ scope, no necesita pasar y itemsProvider o lo que resuelva lo haya nombrado

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

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 usarás 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!


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

En pocas palabras, con el diálogo de IU angular, puede pasar la variable de un controlador al controlador de diálogo usando resolve . Aquí está su controlador "desde":

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

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

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


Simplemente puede crear un funciton 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;
      }
    });
}

También puede pasar fácilmente parámetros al controlador modal agregando una nueva propiedad con instancia de modal y llevarlo 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...
                }]);






angularjs