কোনও মডেলে পরামিতি কীভাবে পাস করবেন?

Question

আমি টুইটার বুটস্ট্র্যাপে ব্যবহারকারী ক্লিকগুলিতে লগ ইন করা userNameএকটি তালিকা থেকে পাস করতে চাই । আমি ব্যবহার করছি grails সঙ্গে angularjs , যেখানে তথ্য মাধ্যমে পেশ করা হয়েছে angularjs ।userNamemodal

কনফিগারেশন

আমার grails দৃশ্য পৃষ্ঠা 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)

এই ক্ষেত্রে সম্পাদনাটি সংজ্ঞায়িত হবে। আপনার এটির মতো ইঞ্জেকশন করা দরকার:

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

এখন এটি মসৃণভাবে কাজ করবে, আমি একই সমস্যায় অনেক সময় মুখোমুখি হয়েছি, একবার ইনজেকশনের পরে, সবকিছু কাজ শুরু করে!

Comments

কৌণিক হিসাবে কিছুই, ইনজেকশনই সমাধান। ধন্যবাদ!

— সেবাস্তিয়ালসো

আমি আপনার উত্তরটি না দেখলে এই অপরিজ্ঞাত ত্রুটিটি আমার মাথা ঘুরে দেখছিল! একটি যাদুমন্ত্র মত কাজ করে!

— ড্যান

আপনি যদি একটি সাধারণ বারের পরিবর্তে কিছু সময়সীমা অবলম্বন করতে চান তবে আপনি কী করবেন? সময়সীমা শেষ হওয়া

— অবধি

আমার সমাধানে আমি যে জিনিসটি হারিয়েছিলাম তা হ'ল সহজ

— উক্তিগুলির

এটি করার ফলে আমি "কৌণিক.জেএস: 10071 ত্রুটি: [ject ইনজেক্টর: আনআরপি] অজানা সরবরাহকারী: editIdProvider <- editId" পেয়েছি। কোন ধারনা?

— ওসকার লুন্ড

Answer 2

অন্যটি কাজ করে না। ডক্স অনুসারে আপনার এটি করা উচিত should

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', ফাংশন () এর মতো এটি মোড়ানো উচিত নয়?

— জোসেরামনক

মন্তব্যের জন্য ধন্যবাদ, হোসে, এটাই আমার সমস্যা ছিল। আপনি যদি নিজের কৌনিক কোডটি ক্ষুদ্র করে দিচ্ছেন তবে হ্যাঁ, আপনাকে ModalInstanceCtrl এর জন্য অ্যারের সিনট্যাক্সটি ব্যবহার করতে হবে।

— এমকোল

জোস, +1 এটি আমার সমস্যাও ছিল। এবং আমি AngularUI ব্যবহার করে এমন প্রত্যেককেই ভাবি!

— মাত্তেও দেফন্তি

Answer 3

বিকল্পভাবে আপনি একটি নতুন সুযোগ তৈরি করতে পারেন এবং স্কোপ বিকল্পের মাধ্যমে প্যারামগুলি দিয়ে যেতে পারেন

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

$ স্কোপটিতে আপনার মডেল কন্ট্রোলার পাসে আপনাকে তার পরে আর আইটেমগুলি সরবরাহকারীর পাস করার প্রয়োজন হবে না বা এটির নামকরণের ক্ষেত্রে যা সমাধান করা হয়েছে ever

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

Comments

$ রুটস্কোপ $ নতুন (); <=== এটি upvote করা উচিত। খুব ঝরঝরে কৌশল। ধন্যবাদ!

— 17:

+1 যেহেতু এটি মডেলের জন্য নিয়ামক নির্ধারণ না করে ডেটা পাস করার অনুমতি দেয়। BTW আপনি কেবল $scope.$new(true)ইনজেকশনের প্রয়োজন ছাড়াই একটি নতুন বিচ্ছিন্ন সুযোগ তৈরি করতে পারেন $rootScope।

— সন্তোষ

@ এমওয়াই: এই পরামর্শের জন্য ধন্যবাদ! শাস্ত্রীয় ইনজেকশন (ব্যবহার করে resolve) সমস্যাটি হ'ল আর্গুমেন্টগুলি বাধ্যতামূলক তাই প্রতিবার আপনি কোনও মডেল খোলার সময় আপনাকে অবশ্যই সমস্ত যুক্তি সমাধান করতে হবে বা কলটি $modal.open()ব্যর্থ হবে কারণ নিয়ামক তার যুক্তি চায় । এই পরিষ্কার scopeকৌশলটি ব্যবহার করে, নির্ভরতাগুলি option চ্ছিক হয়ে যায় become

— স্ট্যাকুলার

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

ঠিক আমার যা প্রয়োজন ছিল। নিখুঁতভাবে কাজ করেছেন।

— ফিশ

Answer 5

আমি নীচে হিসাবে চেষ্টা করেছি।

আমি উত্সাহ বোতামে ng-clickকৌণিক নিয়ন্ত্রককে কল করেছি ,

               <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

আপনার প্রয়োজনের জন্য সত্যই আপনার কৌনিক UI ব্যবহার করা উচিত। এটি পরীক্ষা করে দেখুন: কৌণিক ইউআই ডায়ালগ

সংক্ষেপে, কৌণিক UI ডায়ালগ সহ, আপনি ব্যবহার করে একটি নিয়ামক থেকে ডায়ালগ নিয়ামক ব্যবহার করে ভেরিয়েবল পাস করতে পারেন 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'}}

— SET

এসইটি উত্তরগুলি কার্যকর হবে না। সাইকেলের ঠিক নীচে এটি রয়েছে, এটি সমাধান হওয়া উচিত: {ডেটা: ফাংশন () {রিটার্ন '

— ফু

আজকের দিন আপনি ঠিক বলেছেন তবে যখন আমার উত্তরটি লেখা হয়েছিল, বাক্য গঠনটি ছিল:resolve: { username: 'foo'}

— সান্দ্রো মুন্ডা

Answer 7

আপনি কেবল একটি নিয়ামক ফানসিটন তৈরি করতে পারেন এবং para স্কোপ অবজেক্টের সাথে আপনার পরামিতিগুলি পাস করতে পারেন।

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

আমি ধরে নিচ্ছি যে আপনার মডেল টেম্পলেটটি আপনার নিয়ামকের স্কোপের অভ্যন্তরে রয়েছে, তারপরে আপনার টেম্পলেটে আমার নির্দেশিকাটি যুক্ত করুন । আপনি যদি ক্লিক ব্যবহারকারীকে $ স্কোপ.এমোডেলে সংরক্ষণ করেন তবে মূল টেমপ্লেটটি এখন কাজ করবে।

দ্রষ্টব্য: পুরো স্কোপটি এখন আপনার মডেলের কাছে দৃশ্যমান যাতে আপনি এটিতে স্কোপ.উসেসরগুলিও অ্যাক্সেস করতে পারেন ।

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