Bagaimana cara melewatkan parameter ke modal?

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?

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!

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

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

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

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.

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

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

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>