javascript verwenden Übergeben Sie Parameter an modal




toggle modal from javascript (7)

Ich möchte den userName aus einer Liste von userName angemeldeter Benutzer auf twitter bootstrap modal klickt. Ich verwende Grails mit angularjs , wo Daten über angularjs gerendert werden.

Aufbau

Meine Gralsansichtsseite ist 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>

Mein encourage/_encouragement_modal.gsp ist

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

Also, wie kann ich userName an encouragementModal ?


Der andere funktioniert nicht. Laut den Dokumenten ist dies die Art, wie Sie es tun sollten.

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

Siehe plunkr


Sie können auch einfach Parameter an den modalen Controller übergeben, indem Sie eine neue Eigenschaft mit der Instanz von modal hinzufügen und sie an den modalen Controller übergeben. Beispielsweise:

Im Folgenden ist mein Klick-Event, auf dem ich die modale Ansicht öffnen möchte.

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

Modaler Controller:

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

Wenn Sie nicht AngularJS UI Bootstrap verwenden, hier ist, wie ich es gemacht habe.

Ich habe eine Direktive erstellt, die das gesamte Element deines Modals enthält, und das Element neu kompilieren, um deinen Bereich in es hineinzuspritzen.

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

Ich nehme an, dass Ihre modale Vorlage in den Bereich Ihres Controllers gehört, und fügen Sie dann die Anweisung my-modal zu Ihrer Vorlage hinzu. Wenn Sie den angeklickten Benutzer in $ scope.aModel gespeichert haben , funktioniert die ursprüngliche Vorlage jetzt.

Hinweis: Der gesamte Bereich ist jetzt für Ihr Modal sichtbar, sodass Sie auch auf $ scope.users zugreifen können.

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

Ich habe es wie folgt versucht.

Ich rief ng-click zu angularjs Controller auf Ermutigen- Taste,

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

Ich setze userName von encouragementModal von 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' ];

Ich habe einen Platz ( userName ) zur Verfügung gestellt, um den Wert von angularjs Controller auf userName zu erhalten.

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

Es funktionierte und ich grüßte mich.


Alternativ können Sie einen neuen Bereich erstellen und Params über die Option scope übergeben

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

In Ihrem modalen Controller übergeben Sie in $ Scope, müssen Sie dann nicht übergeben und ItemsProvider oder was auch immer Sie auflösen nannte es

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

Sie können einfach eine Controller-Funktion erstellen und Ihre Parameter mit dem $ scope-Objekt übergeben.

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

Um den Parameter zu übergeben, müssen Sie die Elemente auflösen und in den Controller injizieren

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

Nun, wenn du es so benutzen wirst:

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

In diesem Fall ist editId nicht definiert. Sie müssen es injizieren, so:

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

Jetzt wird es reibungslos funktionieren, ich habe das selbe Problem viele Male, einmal eingespritzt, fängt alles an zu arbeiten!







angularjs