एक मोडल के मापदंडों को कैसे पारित किया जाए?

Question

मैं ट्विटर बूटस्ट्रैप पर उपयोगकर्ता क्लिकों में लॉग इन सा की userNameसूची से गुजरना चाहता हूं । मैं उपयोग कर रहा हूँ grails साथ AngularJS , जहां डाटा के माध्यम से प्रदान की गई हैuserNamemodal AngularJS ।

विन्यास

मेरा कब्र दृश्य पृष्ठ 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>

मेरा encourage/_encouragement_modal.gspहै

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

तो, मैं कैसे पारित कर सकते हैं userNameकरने के लिए encouragementModal?

Comments

आपको एंगुलरज का उपयोग करके इन चीजों को संभालना चाहिए। चेकआउट एनजी-शामिल।

— zs2020

Answer 1

पैरामीटर को पास करने के लिए आपको नियंत्रक में आइटम का उपयोग करने और समाधान करने की आवश्यकता है

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

अब अगर आप इस तरह का उपयोग करेंगे:

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

इस मामले में editId अपरिभाषित हो जाएगा। आपको इसे इस तरह इंजेक्ट करने की आवश्यकता है:

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

अब यह सुचारू रूप से काम करेगा, मैं एक ही समस्या का सामना कई बार करता हूं, एक बार इंजेक्शन लगाने के बाद, सब कुछ काम करना शुरू कर देता है!

Comments

कोणीय के रूप में कुछ भी, इंजेक्शन समाधान है। धन्यवाद!

— सेबेस्टियलोनो

यह अपरिभाषित त्रुटि मेरे सिर में कर रही थी जब तक कि मैंने आपका उत्तर नहीं देखा! एक जादू की तरह काम करता है!

— डैन

आप कैसे करते हैं अगर आप एक बस var के बजाय कुछ टाइमआउट ऑब्जेक्ट पास करना चाहते हैं? समय समाप्त होने पर समय

— Danny22

मेरे समाधान में जो चीज़ मुझे याद आ रही थी, वह थी साधारण उद्धरणों के बीच $ स्कोप और $ लोकेशन का उपयोग करना .... मुझे नहीं पता था कि उन दलीलों के तार होने थे

— rshimoda

ऐसा करने से मुझे "angular.js: 10071 त्रुटि: [$ इंजेक्टर: unpr] अज्ञात प्रदाता: editIdProvider <- editId" मिलता है। कोई विचार?

— ऑस्कर लंड

Answer 2

दूसरा काम नहीं करता है। डॉक्स के अनुसार यह वह तरीका है जो आपको करना चाहिए।

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

प्लंकर देखें

Comments

आपको निर्भरता को इंजेक्ट करने के लिए इसे ['$ गुंजाइश', '$ modalInstance', function () की तरह नहीं लपेटना चाहिए?

— जोसेरामोनक

टिप्पणी के लिए धन्यवाद, जोस, यह वास्तव में मेरा मुद्दा था। यदि आप अपने कोणीय कोड को छोटा कर रहे हैं, तो हाँ, आपको ModalInstanceCtrl के लिए सरणी सिंटैक्स का उपयोग करना होगा।

— 14

जोस, +1 यह मेरी समस्या भी थी। और मुझे लगता है कि हर कोई AngularUI का उपयोग कर रहा है!

— मट्टियो डिफंट्टी

Answer 3

वैकल्पिक रूप से आप एक नया स्कोप बना सकते हैं और स्कोप विकल्प के माध्यम से पैरामस से गुजर सकते हैं

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

आपके मोडल कंट्रोलर $ स्कोप में पास हो जाते हैं, फिर आपको इसमें पास होने की जरूरत नहीं होती है।

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

Comments

$ rootScope नई $ ()। <=== इसे अपडाउन किया जाना चाहिए। बहुत साफ चाल। धन्यवाद!

— reflog

+1 चूंकि यह मोडल के लिए नियंत्रक को परिभाषित किए बिना डेटा पास करने की अनुमति देता है। BTW आप केवल $scope.$new(true)इंजेक्शन लगाने की आवश्यकता के बिना एक नया अलग गुंजाइश बनाने के लिए कर सकते हैं $rootScope।

— संतोष

@Mwayi: इस टिप के लिए धन्यवाद! शास्त्रीय इंजेक्शन (उपयोग करने resolve) के साथ समस्या यह है कि तर्क अनिवार्य हैं इसलिए हर बार जब आप एक मोडल खोलते हैं, तो आपको सभी तर्कों को हल करना होगा या कॉल करने $modal.open()में विफल होना होगा क्योंकि नियंत्रक अपने तर्क चाहता है। इस स्वच्छ scopeचाल का उपयोग करके , निर्भरताएं वैकल्पिक हो जाती हैं।

— स्टैक्युलर

Answer 4

आप मोडल कंट्रोलर के साथ एक नई प्रॉपर्टी को मोडल कंट्रोलर के साथ आसानी से जोड़ सकते हैं और इसे मॉर्डल कंट्रोलर को प्राप्त कर सकते हैं। उदाहरण के लिए:

इसके बाद मेरा क्लिक इवेंट है जिस पर मैं मोडल व्यू खोलना चाहता हूं।

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

मोडल नियंत्रक:

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

Comments

बिल्कुल वही जो मुझे चाहिए था। पूरी तरह से काम किया।

— theFish

Answer 5

मैंने नीचे के रूप में कोशिश की।

मैं कहा जाता है ng-clickपर AngularJS नियंत्रक को प्रोत्साहित करें बटन,

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

मैं सेट userNameकी encouragementModalAngularJS नियंत्रक से।

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

मैंने userNameकोणीयरिज नियंत्रक से मान प्राप्त करने के लिए एक स्थान ( ) प्रदान किया 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>

इसने काम किया और मैंने खुद को सलाम किया।

Comments

मैं +1 करता हूं और आपको सलाम करता हूं। यदि किसी को नियंत्रक में, उसके नाम के लिए एकल उपयोगकर्ता के बजाय पूरे उपयोगकर्ता को पास करने की आवश्यकता है, तो उपयोग करना याद रखें angular.copy(user)।

— Youri

Answer 6

आपको वास्तव में उस जरूरतों के लिए कोणीय यूआई का उपयोग करना चाहिए। इसकी जांच - पड़ताल करें: एंगुलर यूआई डायलॉग

संक्षेप में, कोणीय यूआई संवाद के साथ, आप एक नियंत्रक से संवाद नियंत्रक का उपयोग करके चर पास कर सकते हैं resolve। यहाँ आपका "से" कंट्रोलर है:

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

और अपने संवाद नियंत्रक में:

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

संपादित करें: यूआई-संवाद के नए संस्करण के बाद से, संकल्प प्रविष्टि बन जाता है:

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

Comments

नमस्ते, मैंने इस तरह की कोशिश नहीं की। लेकिन एक सुझाव के लिए +1।

— प्रयागपाद

वास्तव में यह होना चाहिएresolve: function(){return {username: 'foo'}}

— सेट करें

सेट उत्तर से काम नहीं चलेगा। साइकिल के ठीक नीचे यह है, यह होना चाहिए- समाधान: {डेटा: फ़ंक्शन () {वापसी 'फू';}}

— जन्माक्षर

@bornytm आजकल आप सही हैं। लेकिन जब मेरा जवाब लिखा गया, तो वाक्य रचना थी:resolve: { username: 'foo'}

— सैंड्रो मुंडा

Answer 7

आप बस एक नियंत्रक कवक बना सकते हैं और $ गुंजाइश वस्तु के साथ अपने मापदंडों को पास कर सकते हैं।

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

Answer 8

यदि आप AngularJS UI बूटस्ट्रैप का उपयोग नहीं कर रहे हैं, तो यहां बताया गया है कि मैंने यह कैसे किया।

मैंने एक निर्देश बनाया जो आपके मोडल के उस पूरे तत्व को रखेगा, और आपके दायरे को उसमें इंजेक्ट करने के लिए उस तत्व को फिर से जोड़ देगा।

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

मैं मान रहा हूं कि आपका मोडल टेम्प्लेट आपके कंट्रोलर के दायरे के अंदर है, फिर अपने टेंप्लेट में डाइरेक्टिव माय-मोडल जोड़ें । यदि आप क्लिक किए गए उपयोगकर्ता को $ स्कोप में सहेजते हैं। Model , मूल टेम्प्लेट अब काम करेगा।

नोट: पूरा स्कोप अब आपके मोडल के लिए दिखाई दे रहा है, इसलिए आप इसमें $ स्कोप भी पा सकते हैं ।

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