অ্যাঙ্গুলারস ডায়রেক্টিভ কল ফাংশনটি অ্যাট্রিবিউটে নির্দিষ্ট করে এবং এতে একটি আর্গুমেন্ট দেয়

Question

আমি এমন একটি নির্দেশ তৈরি করতে চাই যা কোনও গুনের সাথে লিঙ্ক করে। বৈশিষ্ট্যটি সেই কার্যটি নির্দিষ্ট করে যা স্কোপটিতে কল করা উচিত। তবে আমি লিঙ্ক ফাংশনের অভ্যন্তরে নির্ধারিত ফাংশনে একটি যুক্তিও পাস করতে চাই।

<div my-method='theMethodToBeCalled'></div>

লিঙ্ক ফাংশনে আমি একটি jQuery ইভেন্টে আবদ্ধ হই, যা ফাংশনটিতে আমার পাস করতে হবে এমন একটি যুক্তি পাস করে:

app.directive("myMethod",function($parse) {
  restrict:'A',
  link:function(scope,element,attrs) {
     var expressionHandler = $parse(attrs.myMethod);
     $(element).on('theEvent',function( e, rowid ) {
        id = // some function called to determine id based on rowid
        scope.$apply(function() {expressionHandler(id);});
     }
  }
}

app.controller("myController",function($scope) {
   $scope.theMethodToBeCalled = function(id) { alert(id); };
}

আইডি পাস না করে আমি এটি কাজ করতে পারি, তবে আমি কোনও যুক্তি পাস করার চেষ্টা করার সাথে সাথে ফাংশনটি আর বলা হয় না

Comments

দ্বি-দফা বাঁধাই ছাড়াই কীভাবে অবজেক্ট প্রোপার্টি অ্যাক্সেস করবেন? আমি মনে করি এটি সহায়ক। বিচ্ছিন্ন সুযোগ ব্যবহার করুন এবং the সুযোগের মাধ্যমে পিতামাতাদের স্কোপটি কল করুন $ পিতামাতা

— জেজেবাং

Answer 1

মার্কোর সমাধান ভাল কাজ করে ।

প্রস্তাবিত কৌণিক উপায়ে (ট্রিফেসের প্লঙ্কার দ্বারা দেখানো হয়েছে) এর সাথে বিপরীতে কলব্যাক এক্সপ্রেশনটি ব্যবহার করা উচিত যা হ্যান্ডলারের এক্সপ্রেশনটি সংজ্ঞায়নের প্রয়োজন হয় না। মার্কোর উদাহরণ পরিবর্তনে:

টেমপ্লেটে

<div my-method="theMethodToBeCalled(myParam)"></div>

নির্দেশিকা লিঙ্ক ফাংশনে

$(element).click(function( e, rowid ) {
  scope.method({myParam: id});
});

মার্কোর সমাধানের তুলনায় এটির একটি অসুবিধা রয়েছে - প্রথম লোডে মেথডটোব্যাক্যাল ফাংশনটি মাইপ্যারামের সাথে ডাকা হবে === অপরিজ্ঞাত।

একটি কার্যকারী উদাহরণটি @ ট্রিফেস প্লাঙ্কারে পাওয়া যাবে

Comments

প্রকৃতপক্ষে, কাস্টম অ্যাট্রিবিউটে প্যারামিটারের সাথে ফাংশনটির নাম সরবরাহ করার এই প্যাটার্নটিকে "কলব্যাক ফাংশন" নির্দেশনার ক্ষেত্রে সংজ্ঞা দেওয়ার জন্য সবচেয়ে সহজ এবং সবচেয়ে শক্তিশালী উপায় বলে মনে হচ্ছে ... thx !!

— rekna

"সেটপ্রডাক্ট" 2 টি আলাদা আলাদা জিনিস বলা - এটি বৈশিষ্ট্য এবং স্কোপ ফাংশন বলা খুব বিভ্রান্তিকর, এটি কোনটি কোথায় তা বোঝা সত্যই শক্ত করে তোলে।

— দিমিত্রি জইতসেভ

কি বিভ্রান্তিকর কারণ সঠিক উত্তরটি বিচ্ছিন্ন সুযোগ ব্যবহার করছে তবে প্রশ্নটি আসে না। নাকি আমি কিছু মিস করছি?

— j_walker_dev

এই কোডটি কৌনিক 1.2.28 এ ব্যবহার করে আমার পরীক্ষাগুলি থেকে, এটি ভালভাবে কাজ করে। আমার পরীক্ষাগুলি প্রথম লোডে অনির্ধারিত সাথে মেথডটোবেকলডকে কল করে না। উভয়ই নিমজ্জিত উদাহরণ দেয় না। এটি কোনও সমস্যা বলে মনে হয় না। অন্য কথায়, আপনি যখন নির্দেশিকার লিঙ্কটিতে (কোনও বিচ্ছিন্ন সুযোগে) প্যারামিটারগুলি পাস করতে চান তখন এটি সঠিক পদ্ধতির বলে মনে হয়। আমি অসুবিধা এবং মাইপ্রাম === অপরিজ্ঞাত সম্পর্কিত মন্তব্যটি আপডেট করার পরামর্শ দিচ্ছি।

— জাজি

এটি "মার্কোর সমাধানের তুলনায় এটির একটি অসুবিধা আছে - প্রথম লোডে মেথডটোব্যাক্যাল ফাংশনটি মাইপ্যারামের সাথে আহ্বান করা হবে === অপরিবর্তিত" আমার ক্ষেত্রে ঘটছে না .... আমার ধারণা এখানে কিছু অন্তর্নিহিত প্রসঙ্গ রয়েছে

— ভিক্টর

Answer 2

অন্যান্য উত্তরে কেবল কিছু তথ্য যুক্ত করতে - &আপনার কোনও বিচ্ছিন্ন সুযোগের প্রয়োজন হলে ব্যবহার করা ভাল a

মার্কোর সমাধানের মূল অবলম্বন হ'ল এটি আপনাকে একটি উপাদানকে একটি বিচ্ছিন্ন সুযোগ তৈরি করতে বাধ্য করে, তবে আপনার কেবলমাত্র একটি উপাদানগুলির মধ্যে একটি থাকতে পারে (অন্যথায় আপনি একটি কৌণিক ত্রুটির মধ্যে চলে যাবেন: একাধিক নির্দেশিকা [ডিরেক্টরিটি 1, নির্দেশিকা 2] জিজ্ঞাসা করছেন বিচ্ছিন্ন সুযোগের জন্য )

এর মানে তুমি :

• এটি একটি উপাদান টুপি ব্যবহার করতে পারবেন না একটি বিচ্ছিন্ন সুযোগ আছে
• একই উপাদানটিতে এই সমাধান সহ দুটি নির্দেশনা ব্যবহার করতে পারে না

যেহেতু মূল প্রশ্ন restrict:'A'উভয় পরিস্থিতিতেই নির্দেশিকা ব্যবহার করে তবে বড় অ্যাপ্লিকেশনগুলিতে প্রায়শই দেখা দিতে পারে এবং এখানে একটি বিচ্ছিন্ন সুযোগ ব্যবহার করা ভাল অভ্যাস নয় এবং অপ্রয়োজনীয়ও নয়। প্রকৃতপক্ষে এই ক্ষেত্রে রেকনার একটি ভাল স্বীকৃতি ছিল এবং এটি প্রায় কাজ করছিল, কেবলমাত্র তিনি যে ভুলটি করছিলেন তা ছিল was পার্সড ফাংশনটিকে ভুল বলা (এটি এখানে কী ফিরে আসে তা দেখুন: https://docs.angularjs.org/api/ এনজি / পরিষেবা / / পার্স ))

টি এল; ডিআর; স্থির প্রশ্ন কোড

<div my-method='theMethodToBeCalled(id)'></div>

এবং কোড

app.directive("myMethod",function($parse) {
  restrict:'A',
  link:function(scope,element,attrs) {
     // here you can parse any attribute (so this could as well be,
     // myDirectiveCallback or multiple ones if you need them )
     var expressionHandler = $parse(attrs.myMethod);
     $(element).on('theEvent',function( e, rowid ) {
        calculatedId = // some function called to determine id based on rowid

        // HERE: call the parsed function correctly (with scope AND params object)
        expressionHandler(scope, {id:calculatedId});
     }
  }
}

app.controller("myController",function($scope) {
   $scope.theMethodToBeCalled = function(id) { alert(id); };
}

Comments

+1 প্রকৃতপক্ষে - সুযোগটি বিচ্ছিন্ন করার দরকার নেই - অনেক বেশি ক্লিনার!

— দিমিত্রি জইতসেভ

<বিঘে আমার-পদ্ধতি = 'দ্য ম্যাথডটোবেলক্ল্যান্ড'> </div> বা <ডি মাই-মেথড = 'সতর্কতা ("হাই");'> </ ডিভি> এর মতো একটি ইনলাইন ফাংশন যেমন বৈশিষ্ট্যটিতে কেবল নামের নাম থাকে তবে কী হবে?

— জোনাথন

আপনি যদি এই কোনও পদ্ধতির সাথে সমস্যা বোধ করে থাকেন তবে মনে রাখবেন যে পদ্ধতিটি বলা হচ্ছে তা আপনি যে ফাংশন থেকে ফিরে এসেছিলেন সেখান থেকে অবশ্যই উপলব্ধ থাকতে হবে $parse।

— রাগামুফিন

এই উত্তরটি হ'ল আমি +1

— grimmdude

"আগস্ট" কি? আমি কীভাবে একটি শিশু ডিভে ফাংশনটি সম্পাদন করতে পারি?

— শ্লোমো

Answer 3

আপনি ঠিক কী করতে চান তা জেনে নেই ... তবে এখনও এখানে একটি সম্ভাব্য সমাধান রয়েছে।

স্থানীয় সুযোগে একটি '&' - সম্পত্তি দিয়ে একটি সুযোগ তৈরি করুন। এটি "প্যারেন্ট স্কোপের প্রসঙ্গে একটি অভিব্যক্তি কার্যকর করার একটি উপায় সরবরাহ করে" ( বিশদগুলির জন্য নির্দেশিক ডকুমেন্টেশন দেখুন)।

আমি এটিও লক্ষ্য করেছি যে আপনি একটি শর্টহ্যান্ড লিঙ্কিং ফাংশন ব্যবহার করেছেন এবং সেখানে বস্তুর বৈশিষ্ট্যে সজ্জিত। আপনি এটা করতে পারবেন না। এটি কেবল নির্দেশ-সংজ্ঞা বস্তুটি ফিরিয়ে দেওয়া আরও স্পষ্ট (imho)। নীচে আমার কোড দেখুন।

এখানে একটি কোড নমুনা এবং একটি ফিডাল ।

<div ng-app="myApp">
<div ng-controller="myController">
    <div my-method='theMethodToBeCalled'>Click me</div>
</div>
</div>

<script>

   var app = angular.module('myApp',[]);

   app.directive("myMethod",function($parse) {
       var directiveDefinitionObject = {
         restrict: 'A',
         scope: { method:'&myMethod' },
         link: function(scope,element,attrs) {
            var expressionHandler = scope.method();
            var id = "123";

            $(element).click(function( e, rowid ) {
               expressionHandler(id);
            });
         }
       };
       return directiveDefinitionObject;
   });

   app.controller("myController",function($scope) {
      $scope.theMethodToBeCalled = function(id) { 
          alert(id); 
      };
   });

</script>

Comments

ফাংশনটি কল হয়ে যায়, যখন আমি মেথডটোবিবেলে $ স্কোপ.আইডি = আইডি সেট করি তখন দর্শন আপডেট হয় না। সম্ভাব্য আমার স্কোপের ভিতরে এক্সপ্রেশনহ্যান্ডলার (আইডি) মোড়ানো দরকার। অ্যাপ্লিকেশন।

— রেকনা

আশ্চর্যজনক এটি আমার সমস্যার সমাধান খুঁজে পেতে সহায়তা করেছে। এটি উল্লেখ করার মতো বিষয় যে আপনি যদি নির্দেশের আরও গভীর বাসা বাঁধেন তবে আপনার কেবল শীর্ষ স্তরে এটি করা দরকার। এটি বিবেচনা করুন: plnkr.co/edit/s3y67iGL12F2hDER2RNl?p= পূর্বরূপ দেখুন যেখানে আমি দুটি নির্দেশাবলীর মাধ্যমে পদ্ধতিটি পাস করি।

— গাছের পৃষ্ঠ

এবং এটি করার দ্বিতীয় (সম্ভবত আরও কৌণিক) উপায়: plnkr.co/edit/r9CV9Y1RWRuse4RwFPka?p= পূর্বরূপ

— গাছের তল

সুযোগ বিচ্ছিন্নতা ছাড়া আমি কীভাবে এটি করতে পারি?

— ইভান লাভেস্ক

+1 কারণ এই সমাধানটি আমাকে শিখিয়েছে যে আমাকে স্কপ.মোথড () কল করতে হবে; পদ্ধতির প্রকৃত রেফারেন্স পেতে প্রথমে।

— সাল

Answer 4

আপনি এমন একটি নির্দেশিকা তৈরি করতে পারেন attrName: "&"যা বাহ্যিক স্কোপে অভিব্যক্তিটি রেফারেন্স ব্যবহার করে প্যারামগুলির সাথে একটি ফাংশন কল কার্যকর করে ।

আমরা ng-clickনির্দেশটি এর সাথে প্রতিস্থাপন করতে চাই ng-click-x:

<button ng-click-x="add(a,b)">Add</button>

আমাদের যদি এই সুযোগ ছিল:

$scope.a = 2;
$scope.b = 2;

$scope.add = function (a, b) {
  $scope.result = parseFloat(a) + parseFloat(b);
}

আমরা আমাদের নির্দেশিকাটি এভাবে লিখতে পারি:

angular.module("ng-click-x", [])

.directive('ngClickX', [function () {

  return {

    scope: {

      // Reference the outer scope
      fn: "&ngClickX",

    },

    restrict: "A",

    link: function(scope, elem) {

      function callFn () {
        scope.$apply(scope.fn());
      }

      elem[0].addEventListener('click', callFn);
    }
  };
}]);

এখানে একটি লাইভ ডেমো রয়েছে: http://plnkr.co/edit/4QOGLD?p=info

Answer 5

আমার জন্য কি কাজ করেছে তা এখানে।

এইচটিএমএল নির্দেশটি ব্যবহার করে

 <tr orderitemdirective remove="vm.removeOrderItem(orderItem)" order-item="orderitem"></tr>

নির্দেশের এইচটিএমএল: অর্ডারাইটেম.ডায়ারেক্টিভ। Html

<md-button type="submit" ng-click="remove({orderItem:orderItem})">
       (...)
</md-button>

নির্দেশকের সুযোগ:

scope: {
    orderItem: '=',
    remove: "&",

Answer 6

আমার সমাধান:

1. পলিমারে একটি ইভেন্ট উত্থাপন (উদাঃ complete)
2. কার্য নিয়ন্ত্রণ করতে ইভেন্টের সাথে সংযুক্ত একটি নির্দেশকে সংজ্ঞায়িত করুন

নির্দেশিকা

/*global define */
define(['angular', './my-module'], function(angular, directives) {
    'use strict';
    directives.directive('polimerBinding', ['$compile', function($compile) {

            return {
                 restrict: 'A',
                scope: { 
                    method:'&polimerBinding'
                },
                link : function(scope, element, attrs) {
                    var el = element[0];
                    var expressionHandler = scope.method();
                    var siemEvent = attrs['polimerEvent'];
                    if (!siemEvent) {
                        siemEvent = 'complete';
                    }
                    el.addEventListener(siemEvent, function (e, options) {
                        expressionHandler(e.detail);
                    })
                }
            };
        }]);
});

পলিমার উপাদান

<dom-module id="search">

<template>
<h3>Search</h3>
<div class="input-group">

    <textarea placeholder="search by expression (eg. temperature>100)"
        rows="10" cols="100" value="{{text::input}}"></textarea>
    <p>
        <button id="button" class="btn input-group__addon">Search</button>
    </p>
</div>
</template>

 <script>
  Polymer({
    is: 'search',
            properties: {
      text: {
        type: String,
        notify: true
      },

    },
    regularSearch: function(e) {
      console.log(this.range);
      this.fire('complete', {'text': this.text});
    },
    listeners: {
        'button.click': 'regularSearch',
    }
  });
</script>

</dom-module>

পৃষ্ঠা

 <search id="search" polimer-binding="searchData"
 siem-event="complete" range="{{range}}"></siem-search>

searchData নিয়ন্ত্রণ ফাংশন হয়

$scope.searchData = function(searchObject) {
                    alert('searchData '+ searchObject.text + ' ' + searchObject.range);

}

Answer 7

এই কাজ করা উচিত.

<div my-method='theMethodToBeCalled'></div>

app.directive("myMethod",function($parse) {
  restrict:'A',
  scope: {theMethodToBeCalled: "="}
  link:function(scope,element,attrs) {
     $(element).on('theEvent',function( e, rowid ) {
        id = // some function called to determine id based on rowid
        scope.theMethodToBeCalled(id);
     }
  }
}

app.controller("myController",function($scope) {
   $scope.theMethodToBeCalled = function(id) { alert(id); };
}