একটি কৌণিক নির্দেশিকা নির্দেশের বৈশিষ্ট্যগুলিতে উল্লিখিত এক্সপ্রেশনগুলিতে ফাংশনগুলিতে তর্ক করতে পারে?

Question

আমার একটি ফর্ম নির্দেশিকা রয়েছে যা callbackএকটি বিচ্ছিন্ন সুযোগের সাথে একটি নির্দিষ্ট বৈশিষ্ট্য ব্যবহার করে :

scope: { callback: '&' }

এটি একটির ভিতরে বসে ng-repeatতাই আমি যে অভিব্যক্তিটি পাস করি idতাতে কলব্যাক ফাংশনের যুক্তি হিসাবে অবজেক্টটির অন্তর্ভুক্ত থাকে:

<directive ng-repeat = "item in stuff" callback = "callback(item.id)"/>

আমি যখন নির্দেশিকাটি শেষ করেছি, এটি $scope.callback()এর নিয়ামক ফাংশন থেকে কল করে। বেশিরভাগ ক্ষেত্রে এটি ঠিক আছে, এবং আমি যা করতে চাই তা সবই তবে কখনও কখনও আমি directiveনিজে থেকেই অন্য যুক্তি যুক্ত করতে চাই ।

এমন কোন কৌণিক অভিব্যক্তি যা এর অনুমতি দেবে:, $scope.callback(arg2)যার ফলে callbackডাকা হচ্ছে arguments = [item.id, arg2]?

যদি তা না হয় তবে এটি করার নিকটতম উপায় কী?

আমি খুঁজে পেয়েছি যে এটি কাজ করে:

<directive 
  ng-repeat = "item in stuff" 
  callback = "callback" 
  callback-arg="item.id"/>

সঙ্গে

scope { callback: '=', callbackArg: '=' }

এবং নির্দেশিকা আহ্বান

$scope.callback.apply(null, [$scope.callbackArg].concat([arg2, arg3]) );

তবে আমি মনে করি এটি বিশেষভাবে ঝরঝরে নয় এবং এর মধ্যে অতিরিক্ত জিনিসগুলি বিচ্ছিন্ন সুযোগে রাখা জড়িত।

একটি ভাল উপায় আছে কি?

এখানে প্লাঙ্কার খেলার মাঠ (কনসোল খোলা আছে)।

Comments

নামকরণ "কলব্যাক =" বিভ্রান্ত করে। এটি সত্যিই একটি কলব্যাক মূল্যায়ন, নিজে কলব্যাক নয়।

— দিমিত্রি জায়তসেভ

@ দিমিত্রিজেটসেভ এটি একটি কলব্যাক কৌণিক অভিব্যক্তি যা একটি জাভাস্ক্রিপ্ট ফাংশনকে মূল্যায়ন করবে। আমি মনে করি এটি মোটামুটি সুস্পষ্ট যে এটি নিজের মধ্যে কোনও জাভাস্ক্রিপ্ট ফাংশন নয়। এটি কেবল অগ্রাধিকার তবে আমি "এক্সপ্রেশন" দিয়ে আমার সমস্ত গুণাবলী প্রত্যয়িত না করা পছন্দ করব। এটি ngএপিআই এর সাথে সামঞ্জস্যপূর্ণ উদাহরণস্বরূপ ng-click="someFunction()"এমন একটি অভিব্যক্তি যা কোনও ফাংশন সম্পাদন করার ক্ষেত্রে মূল্যায়ন করে।

— এড হিঙ্কলিফ

অ্যাঙ্গুলার এক্সপ্রেশনটি আমি "কলব্যাক" বলে দেখিনি। এটি সর্বদা এমন একটি ফাংশন যা আপনাকে ডাকা হতে পারে, নামটি কোথা থেকে। এমনকি জিনিসগুলিকে আরও বিভ্রান্ত করার জন্য আপনি নিজের উদাহরণে "কলব্যাক" নামে একটি ফাংশন ব্যবহার করেন।

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

আমি নিশ্চিত না যে আপনি বিভ্রান্ত হয়ে পড়েছেন বা আমি। আমার উদাহরণে দিকনির্দেশক সংজ্ঞা বস্তুর বৈশিষ্ট্য এবং সম্পত্তি $scope.callbackদ্বারা সেট করা আছে । হয় একটি ফাংশন পরের কোন তারিখে বলা হবে। প্রকৃত বৈশিষ্ট্যটির মানটি অবশ্যই একটি স্ট্রিং - এটি এইচটিএমএল এর ক্ষেত্রে সর্বদা ক্ষেত্রে। callback="someFunction"scope: { callback: '=' }$scope.callback

— এড হিঙ্কলিফ

আপনি উভয় বৈশিষ্ট্যটির নাম দিয়েছেন এবং একইরূপে কাজ করেন - "কলব্যাক"। এটাই বিভ্রান্তির রেসিপি। সত্যই এড়ানো সহজ।

— দিমিত্রি জায়তসেভ

Answer 1

যদি আপনি আপনার কলব্যাকটি @ লেক্স ৮২ এর মত উল্লেখ করে ঘোষণা করেন

callback = "callback(item.id, arg2)"

আপনি অবজেক্ট ম্যাপের সাহায্যে নির্দেশের সুযোগে কলব্যাক পদ্ধতিটি কল করতে পারেন এবং এটি সঠিকভাবে বাঁধাই করতে পারে। মত

scope.callback({arg2:"some value"});

$ পার্সের প্রয়োজন ছাড়াই। আমার ফিডল (কনসোল লগ) দেখুন http://jsfiddle.net/k7czc/2/

আপডেট : ডকুমেন্টেশনে এর একটি ছোট উদাহরণ রয়েছে :

& অথবা & attr - পিতামাতার সুযোগের প্রসঙ্গে একটি অভিব্যক্তি কার্যকর করার একটি উপায় সরবরাহ করে। যদি কোনও অ্যাট্রির নাম নির্দিষ্ট না করা থাকে তবে বৈশিষ্ট্যটির নামটি স্থানীয় নামের মতোই ধরে নেওয়া হয়। স্কোপটির দেওয়া এবং উইজেটের সংজ্ঞা: {লোকালএফএন: 'এবং মাইআউটআর'}, তারপরে স্কোপ প্রোপার্টি লোকালফোনটি বিচ্ছিন্ন করুনFF গণনা = গণনা + মান প্রকাশের জন্য একটি ফাংশন মোড়কে নির্দেশ করবে। প্রায়শই বিচ্ছিন্ন স্কোপ থেকে একটি অভিব্যক্তির মাধ্যমে এবং প্যারেন্ট স্কোপে ডেটা প্রেরণ করা বাঞ্ছনীয়, এটি স্থানীয় ভেরিয়েবলের নাম এবং মানগুলির মানচিত্রটি রেফারেন্স রেভার এফএনএনে পাস করে করা যেতে পারে। উদাহরণস্বরূপ, যদি এক্সপ্রেশনটি ইনক্রিমেন্ট (পরিমাণ) হয় তবে আমরা লোকালএফএনকে লোকালএফএন ({পরিমাণ: 22}) হিসাবে কল করে পরিমাণের মানটি নির্দিষ্ট করতে পারি।

Comments

খুব সুন্দর! এই কোথাও নথিভুক্ত করা হয়?

— এইচ

আমি মনে করি না এটি একটি ভাল সমাধান কারণ নির্দেশিক সংজ্ঞায় কখনও কখনও আপনি জানতেন না যে প্যারামিটারটি কী পাস করবে

— ওএমজিপিওপ

এটি একটি ভাল সমাধান এবং এর জন্য আপনাকে ধন্যবাদ, তবে আমি বিশ্বাস করি যে উত্তরটির জন্য কিছুটা ভাটা দরকার। লেক্স 82 কে এবং তিনি কী উল্লেখ করেছেন?

— ওয়াটওয়ার

আকর্ষণীয় পদ্ধতির। যদিও আপনি যখন কোনও প্যারামিটার (বা একাধিক) দিয়ে কোনও ফাংশন পাস করার অনুমতি দিতে চান তখন কী ঘটে? আপনি ফাংশন বা এর পরামিতিগুলির কিছুই জানেন না এবং নির্দেশের অভ্যন্তরে কোনও ইভেন্টে এটি সম্পাদন করতে হবে। কিভাবে এটি সম্পর্কে যেতে হবে? উদাহরণস্বরূপ কোনও নির্দেশিকায় আপনার onitcfunc = 'myCtrlFunc (ডায়নামিক ভারিবেল এখানে) থাকতে পারে'

— ট্রেনোসিস

Answer 2

অন্যান্য উত্তরগুলির সাথে কোনওরকম ভুল নয়, তবে কোনও নির্দেশিক গুণে ফাংশনগুলি পাস করার সময় আমি নিম্নলিখিত কৌশলটি ব্যবহার করি।

আপনার এইচটিএমএলের নির্দেশকে অন্তর্ভুক্ত করার সময় বন্ধনী ছেড়ে দিন:

<my-directive callback="someFunction" />

তারপরে আপনার নির্দেশিকার লিঙ্ক বা নিয়ামকের মধ্যে ফাংশনটি "আনারপ" করুন। এখানে একটি উদাহরণ:

app.directive("myDirective", function() {

    return {
        restrict: "E",
        scope: {
            callback: "&"                              
        },
        template: "<div ng-click='callback(data)'></div>", // call function this way...
        link: function(scope, element, attrs) {
            // unwrap the function
            scope.callback = scope.callback(); 

            scope.data = "data from somewhere";

            element.bind("click",function() {
                scope.$apply(function() {
                    callback(data);                        // ...or this way
                });
            });
        }
    }
}]);    

"আনারপ্যাপিং" পদক্ষেপটি আরও প্রাকৃতিক সিনট্যাক্স ব্যবহার করে ফাংশনটি কল করার অনুমতি দেয়। এটিও নিশ্চিত করে যে নির্দেশটি সঠিকভাবে কাজ করে এমনকি ফাংশনটি পাস করতে পারে এমন অন্যান্য নির্দেশাবলীর মধ্যে নেস্ট করা হলেও। আপনি যদি মোড়ানো না করে থাকেন, তবে আপনার যদি এমন দৃশ্য থাকে:

<outer-directive callback="someFunction" >
    <middle-directive callback="callback" >
        <inner-directive callback="callback" />
    </middle-directive>
</outer-directive>

তারপরে আপনি আপনার অভ্যন্তরীণ দিকনির্দেশনায় এমন কিছু দিয়ে শেষ করবেন:

callback()()()(data); 

যা অন্যান্য নেস্টিং পরিস্থিতিতে ব্যর্থ হবে।

ডেন ওয়াহলিনের একটি দুর্দান্ত নিবন্ধ থেকে http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-3-isolate-scope-and-function-paraters এ আমি এই কৌশলটি অভিযোজিত করেছি

আমি ফাংশনটিকে কলকে আরও প্রাকৃতিক করার জন্য এবং কোন প্রকল্পে যে বাসা বাঁধতে পেরেছি তার সমস্যার সমাধান করার জন্য অদলিত পদক্ষেপ যুক্ত করেছি।

Comments

একটি দুর্দান্ত পদ্ধতির তবে আমি thisকলব্যাক পদ্ধতির অভ্যন্তরে পয়েন্টারটি ব্যবহার করতে পারছি না , কারণ এটি নির্দেশকের সুযোগটি ব্যবহার করে। : আমি টাইপ করা বিষয় ও আমার কলব্যাক সৌন্দর্য ব্যবহার করছি মত এইpublic validateFirstName(firstName: string, fieldName: string): ng.IPromise<boolean> { var deferred = this.mQService.defer<boolean>(); ... .then(() => deferred.resolve(true)) .catch((msg) => { deferred.reject(false); }); return deferred.promise; }

— ndee

বিজ্ঞপ্তি: আপনি যদি নির্দেশাবলী নেস্টেট করে থাকেন এবং কলব্যাককে উপরের দিকে প্রচার করতে চান তবে আপনাকে প্রতিটি নির্দেশিকাতে কেবল একটি ট্রিগার কলব্যাক নয়, তবে মোড়কির প্রয়োজন।

— এপিসোডেক্স

Answer 3

নির্দেশে ( myDirective):

...
directive.scope = {  
    boundFunction: '&',
    model: '=',
};
...
return directive;

নির্দেশমূলক টেমপ্লেটে:

<div 
data-ng-repeat="item in model"  
data-ng-click='boundFunction({param: item})'>
{{item.myValue}}
</div>

উত্স উত্স:

<my-directive 
model='myData' 
bound-function='myFunction(param)'>
</my-directive>

... যেখানে myFunctionনিয়ামক সংজ্ঞায়িত করা হয়।

নোট করুন যে paramনির্দেশক টেমপ্লেটে উত্সটিতে খুব সুন্দরভাবে আবদ্ধ হয় paramএবং সেট করা আছে item।

---

linkকোনও নির্দেশকের ("এর ভিতরে") এর সম্পত্তি থেকে কল করতে খুব অনুরূপ পদ্ধতির ব্যবহার করুন:

...
directive.link = function(isolatedScope) {
    isolatedScope.boundFunction({param: "foo"});
};
...
return directive;

Comments

উত্স থাকা অবস্থায়: গণ্ডি-ফাংশন = 'আমার ফাংশন (obj1.param, obj2.param)'> তারপরে কীভাবে এগিয়ে যেতে হবে?

— অঙ্কিত পান্ডে

Answer 4

হ্যাঁ, এর চেয়ে আরও ভাল উপায় আছে: আপনি কেবলমাত্র আপনার নির্দেশিকার ভিতরে দৃশ্যমান মানগুলিতে অভিব্যক্তির নির্দিষ্ট শনাক্তকারীদের আবদ্ধ করে পিতামাতার সুযোগের প্রসঙ্গে একটি অভিব্যক্তি মূল্যায়নের জন্য আপনার নির্দেশিকায় পার্স পরিষেবাটি ব্যবহার করতে পারেন :

$parse(attributes.callback)(scope.$parent, { arg2: yourSecondArgument });

নির্দেশের লিঙ্ক ফাংশনে এই লাইনটি যুক্ত করুন যেখানে আপনি নির্দেশকের বৈশিষ্ট্যগুলি অ্যাক্সেস করতে পারেন।

আপনার কলব্যাক বৈশিষ্ট্যটি এরপরে সেট করা যেতে পারে callback = "callback(item.id, arg2)"কারণ নির্দেশের ভিতরে পার্স পরিষেবা দ্বারা আরগ 2 আপনার সেকেন্ডঅর্গুমেন্টে আবদ্ধ। মত নির্দেশাবলী ng-clickআপনাকে $eventসঠিকভাবে এই প্রক্রিয়াটি ব্যবহার করে নির্দেশের কাছে অভিব্যক্তির ভিতরে সনাক্তকারীটির মাধ্যমে ক্লিক ইভেন্টটি অ্যাক্সেস করতে দেয় ।

মনে রাখবেন যে callbackএই সমাধানটি দিয়ে আপনাকে আপনার বিচ্ছিন্ন সুযোগের সদস্য করতে হবে না ।

Comments

scope.$parentব্যবহারটি নির্দেশকে "ফাঁস" করে তোলে - এটি বহিরাগত বিশ্বের খুব বেশি "জানে", যা একটি ভাল-ডিজাইন করা এনক্যাপসুলেটেড উপাদানটি করা উচিত নয়।

— দিমিত্রি জায়তসেভ

ঠিক আছে, এটি জানে যে এটির একটি মূল সুযোগ রয়েছে তবে এটি সুযোগের কোনও নির্দিষ্ট ক্ষেত্রে অ্যাক্সেস করে না তাই আমি মনে করি এটি সহনীয় this

— lex82

Answer 5

আমার জন্য নিম্নলিখিত কাজ করেছেন:

নির্দেশে এটি এইভাবে ঘোষণা করুন:

.directive('myDirective', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            myFunction: '=',
        },
        templateUrl: 'myDirective.html'
    };
})  

নির্দেশমূলক টেমপ্লেটে এটি নিম্নলিখিত উপায়ে ব্যবহার করুন:

<select ng-change="myFunction(selectedAmount)">

এবং তারপরে আপনি যখন নির্দেশটি ব্যবহার করেন তখন ফাংশনটি এভাবে পাস করুন:

<data-my-directive
    data-my-function="setSelectedAmount">
</data-my-directive>

আপনি এর ঘোষণার মাধ্যমে ফাংশনটি পাস করেন এবং এটি নির্দেশক থেকে ডেকে আনা হয় এবং পরামিতিগুলি জনবসত হয়।