Modale parametreler nasıl aktarılır?

96

Oturum açmış bir kullanıcı tıklamaları userNamelistesinden userNametwitter önyüklemesine geçmek istiyorum modal. Verilerin angularjs aracılığıyla oluşturulduğu angularjs ile grails kullanıyorum .

Yapılandırma

Benim grails görünüm sayfası encouragement.gspolan 

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

Benim encourage/_encouragement_modal.gspise 

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

Yani, nasıl geçebilir userNameiçin encouragementModal?

javascript  twitter-bootstrap  grails  angularjs 
— dua etmek
kaynak
1
Bunları angularjs kullanarak halletmelisiniz. checkout ng-içerir.
— zs2020

Yanıtlar:

149

Parametreyi geçmek için, denetleyicideki öğeleri çözümlemeniz ve enjekte etmeniz gerekir.

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

Şimdi böyle kullanacaksan:

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

bu durumda editId tanımsız olacaktır. Bunu şu şekilde enjekte etmelisin:

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

Şimdi sorunsuz çalışacak, aynı problemle birçok kez karşılaşıyorum, bir kez enjekte edildiğinde her şey çalışmaya başlıyor!

— Ali Adravi
kaynak
Angular herhangi bir şey gibi, çözüm enjeksiyondur. Teşekkürler!
— Sebastialonso
Bu tanımsız hata, cevabınızı görene kadar kafamı karıştırıyordu! Tıkır tıkır çalışıyor!
— Dan
Basit bir değişken yerine bir zaman aşımı nesnesi geçirmek istiyorsanız nasıl yaparsınız? zaman aşımı çözülene kadar çözüm çalışmayacaktır, bu zaman aşımının sonunda gerçekleşir
— Danny22
— Çözümümde
1
Bunu yaparken "angular.js: 10071 Hata: [$ injector: unpr] Bilinmeyen sağlayıcı: editIdProvider <- editId" alıyorum. Herhangi bir fikir?
— Oskar Lund
57

Diğeri çalışmıyor. Dokümanlara göre bunu yapmanız gereken yol bu.

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

Plunkr bakın

— bisiklet
kaynak
1
Bağımlılıkları enjekte etmek için bunu ['$ kapsam', '$ modalInstance', fonksiyon () gibi sarmamalısınız?
— joseramonc
1
Yorum için teşekkürler Jose, bu benim sorunumdu. Angular kodunuzu küçültüyorsanız, evet, ModalInstanceCtrl için dizi sözdizimini kullanmanız gerekir.
— mcole
Jose, +1 Benim de sorunumdu. Ve AngularUI kullanan herkesi düşünüyorum!
— Matteo Defanti
50

Alternatif olarak, yeni bir kapsam oluşturabilir ve kapsam seçeneği aracılığıyla parametrelerden geçebilirsiniz.

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

Modal denetleyicinizde $ kapsam geçtikten sonra, o zaman ve itemsProvider'ı veya adını verdiğiniz şeyi çözmeniz gerekmez.

modalController = function($scope) {
    console.log($scope.params)
}
— Mwayi
kaynak
2
$ rootScope. $ new (); <=== buna olumlu oy verilmelidir. çok düzgün bir numara. Teşekkürler!
— 2014 16
3
+1 Çünkü bu, modal için bir kontrolör tanımlamaya gerek kalmadan verilerin geçişine izin verir. BTW $scope.$new(true), enjekte etmeye gerek kalmadan yeni bir izole edilmiş kapsam oluşturmak için yapabilirsiniz $rootScope.
— Santosh
@Mwayi: Bu ipucu için teşekkürler! Klasik enjeksiyon (kullanarak resolve) ile ilgili sorun , bağımsız değişkenlerin zorunlu olmasıdır, bu nedenle bir modal'ı her açtığınızda, tüm bağımsız değişkenleri çözmeniz gerekir, $modal.open()aksi takdirde denetleyici bağımsız değişkenlerini istediğinden çağrı başarısız olur . Bu düzgün scopenumarayı kullanarak bağımlılıklar isteğe bağlı hale gelir.
— yığın
23

Ayrıca, modal örneğine yeni bir özellik ekleyerek ve bunu modal denetleyiciye alarak parametreleri modal denetleyiciye kolayca iletebilirsiniz. Örneğin:

Modal görünümü açmak istediğim tıklama olayım aşağıdadır.

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

Modal Denetleyici:

angular.module('myApp').controller('UserDetailCtrl', ['$modalInstance',
                function ($modalInstance) {
                    // get your parameter from modal instance
                    var currentUser = $modalInstance.userName;
                    // do your work...
                }]);
— Rubi saini
kaynak
Tam olarak ihtiyacım olan şey. Mükemmel çalıştı.
— theFish
17

Aşağıdaki gibi denedim.

Teşvik Et ng-clickbutonundaki angularjs kontrolörünü aradım ,

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

I set userNamearasında encouragementModalangularjs denetleyicisinden.

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

userNameAngularjs controller'dan değer almak için bir yer ( ) sağladım 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>

İşe yaradı ve kendimi selamladım.

— dua etmek
kaynak
3
+ 1'liyorum ve sizi selamlıyorum. Birinin, denetleyicideki adı için tek bir dizeden ziyade tüm kullanıcıyı kipe geçirmesi gerekiyorsa, kullanmayı unutmayın angular.copy(user).
— youri
10

Bu ihtiyaçlar için gerçekten Angular UI kullanmalısınız. Şuna bakın : Açısal Kullanıcı Arayüzü İletişim Kutusu

Özetle, Angular UI iletişim kutusu ile, değişkenleri bir denetleyiciden iletişim denetleyicisine kullanarak iletebilirsiniz resolve. İşte "gönderen" denetleyiciniz:

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

Ve iletişim denetleyicinizde:

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

DÜZENLE: UI iletişim kutusunun yeni sürümünden bu yana, çözümleme girişi şöyle olur:

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

— Sandro Munda
kaynak
Merhaba ben bu şekilde denemedim. Ancak bir öneri için +1.
— 2013
3
aslında bu olmalıdırresolve: function(){return {username: 'foo'}}
— SET
SET'lerin cevabı işe yaramayacak. bisikletin hemen altında, şu çözülmesi gerekiyor: {data: function () {return 'foo';}}
— bornytm
1
@bornytm Bugünlerde haklısın. Ancak cevabım yazıldığında sözdizimi şöyleydi:resolve: { username: 'foo'}
— Sandro Munda
4

Basitçe bir denetleyici işlevi oluşturabilir ve parametrelerinizi $ kapsam nesnesiyle iletebilirsiniz.

$scope.Edit = function (modalParam) {
var modalInstance = $modal.open({
      templateUrl: '/app/views/admin/addeditphone.html',
      controller: function($scope) {
        $scope.modalParam = modalParam;
      }
    });
}
— her şey yolunda
kaynak
1

AngularJS UI Bootstrap kullanmıyorsanız, işte böyle yaptım.

Modal'inizin tüm bu öğesini tutacak ve kapsamınızı ona eklemek için öğeyi yeniden derleyecek bir yönerge oluşturdum.

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

Modal şablonunuzun denetleyicinizin kapsamında olduğunu varsayıyorum, ardından şablonunuza my-modal yönergesi ekleyin . Tıklanan kullanıcıyı $ kapsam.aModel'e kaydettiyseniz , orijinal şablon şimdi çalışacaktır.

Not: Tüm kapsam artık modalınız tarafından görülebilir, böylece içindeki $cope.users'a da erişebilirsiniz .

<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>
— seçkinlik
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.