Bagaimana cara melewatkan parameter ke modal?


96

Saya ingin meneruskan userNamedari daftar userNameklik pengguna yang login ke twitter bootstrap modal. Saya menggunakan grails dengan angularjs , di mana data diberikan melalui angularjs .

Konfigurasi

Halaman tampilan grails saya encouragement.gspadalah

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

Saya encourage/_encouragement_modal.gspadalah

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

Jadi, bagaimana saya bisa lolos userNameke encouragementModal?


1
Anda harus menangani hal-hal ini menggunakan angularjs. checkout ng-include.
zs2020

Jawaban:


149

Untuk melewatkan parameter, Anda perlu menggunakan tekad dan injeksi item dalam pengontrol

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

Sekarang jika Anda akan menggunakan seperti ini:

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

dalam hal ini editId tidak akan ditentukan. Anda perlu menyuntikkannya, seperti ini:

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

Sekarang akan bekerja dengan lancar, saya menghadapi masalah yang sama berkali-kali, setelah disuntikkan, semuanya mulai bekerja!


Seperti apapun Angular, injeksi adalah solusinya. Terima kasih!
Sebastialonso

kesalahan yang tidak terdefinisi ini melakukan pikiran saya sampai saya melihat jawaban Anda! Bekerja seperti pesona!
Dan

Bagaimana Anda melakukannya jika alih-alih hanya var Anda ingin meneruskan beberapa objek batas waktu? tekad tidak akan menyala sampai batas waktu diselesaikan, yang terjadi pada akhir batas waktu
Danny22

Hal yang saya lewatkan dalam solusi saya adalah menggunakan $ scope dan $ location di antara tanda kutip sederhana .... Saya tidak tahu argumen tersebut harus berupa string
rshimoda

1
Melakukan ini saya mendapatkan "angular.js: 10071 Kesalahan: [$ injector: tidak] Penyedia tidak dikenal: editIdProvider <- editId". Ada ide?
Oskar Lund

57

Yang lainnya tidak berfungsi. Menurut dokumen, inilah cara yang harus Anda lakukan.

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

Lihat plunkr


1
Anda tidak boleh membungkus ini seperti ['$ scope', '$ modalInstance', function () untuk memasukkan dependensi?
joseramonc

1
Terima kasih atas komentarnya, Jose, itulah masalah saya. Jika Anda meminimalkan kode Angular Anda, ya, Anda harus menggunakan sintaks array untuk ModalInstanceCtrl.
mcole

Jose, +1 Itu juga masalah saya. Dan saya pikir semua orang menggunakan AngularUI!
Matteo Defanti

50

Atau Anda dapat membuat cakupan baru dan melewati params melalui opsi cakupan

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

Dalam modal controller Anda, berikan $ scope, Anda tidak perlu meneruskan dan itemsProvider atau penyelesaian apa pun yang Anda beri nama

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

2
$ rootScope. $ new (); <=== ini harus diberi suara positif. trik yang sangat rapi. Terima kasih!
reflog

3
+1 Karena ini memungkinkan untuk melewatkan data tanpa harus menentukan pengontrol untuk modal. BTW bisa Anda lakukan $scope.$new(true)untuk membuat scope baru yang terisolasi tanpa perlu menginjeksi $rootScope.
Santosh

@ Mwayi: Terima kasih atas tip ini! Masalah dengan injeksi klasik (menggunakan resolve) adalah argumennya wajib sehingga setiap kali Anda membuka modal, Anda harus menyelesaikan semua argumen atau panggilan ke $modal.open()akan gagal karena pengontrol menginginkan argumennya. Dengan menggunakan scopetrik rapi ini , dependensi menjadi opsional.
stackular

23

Anda juga dapat dengan mudah melewatkan parameter ke modal controller dengan menambahkan properti baru dengan instance dari modal dan membawanya ke modal controller. Sebagai contoh:

Berikut adalah acara klik saya di mana saya ingin membuka tampilan 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';
        };

Pengontrol Modal:

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

Persis yang saya butuhkan. Bekerja dengan sempurna.
theFish

17

Saya mencoba seperti di bawah ini.

Saya memanggil ng-clickpengontrol angularjs pada tombol Mendorong ,

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

Saya mengatur userNamedari encouragementModalpengontrol 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' ];

Saya menyediakan tempat ( userName) untuk mendapatkan nilai dari pengontrol 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>

Itu berhasil dan saya memberi hormat pada diri saya sendiri.


3
Saya memberi +1 dan saya memberi hormat. Jika seseorang perlu meneruskan seluruh pengguna ke modal daripada satu string untuk namanya, di pengontrol, ingatlah untuk menggunakannya angular.copy(user).
youri

10

Anda harus benar-benar menggunakan UI Angular untuk kebutuhan itu. Lihat ini: Dialog UI Angular

Singkatnya, dengan dialog UI Angular, Anda dapat meneruskan variabel dari pengontrol ke pengontrol dialog menggunakan resolve. Ini pengontrol "dari" Anda:

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

Dan di pengontrol dialog Anda:

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

EDIT: Karena versi baru ui-dialog, entri penyelesaian menjadi:

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


Hai, saya tidak mencoba cara ini. Tapi +1 untuk saran.
prayagupd

3
sebenarnya itu harusresolve: function(){return {username: 'foo'}}
SET

Jawaban SET tidak akan berfungsi. sepeda ada tepat di bawah, itu harus- diselesaikan: {data: function () {return 'foo';}}
bornytm

1
@bornyt Saat ini Anda benar. Tapi ketika jawaban saya ditulis, sintaksnya adalah:resolve: { username: 'foo'}
Sandro Munda

4

Anda cukup membuat fungsi pengontrol dan meneruskan parameter Anda dengan objek $ scope.

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

1

Jika Anda tidak menggunakan AngularJS UI Bootstrap, berikut cara saya melakukannya.

Saya membuat arahan yang akan menampung seluruh elemen modal Anda, dan mengkompilasi ulang elemen untuk menyuntikkan ruang lingkup Anda ke dalamnya.

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

Saya berasumsi template modal Anda berada di dalam cakupan pengontrol Anda, lalu tambahkan direktif my-modal ke template Anda. Jika Anda menyimpan pengguna yang diklik ke $ scope.aModel , template asli sekarang akan berfungsi.

Catatan: Seluruh cakupan sekarang terlihat oleh modal Anda sehingga Anda juga dapat mengakses $ scope.users di dalamnya.

<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>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.