javascript - অবজ - জাভাস্ক্রিপ্ট বাংলা বই




একটি কৌণিক নির্দেশিকা নির্দেশক এর গুণাবলী নির্দিষ্ট এক্সপ্রেশন ফাংশন ফাংশন আর্গুমেন্ট পাস করতে পারেন? (4)

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

scope: { callback: '&' }

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

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

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

একটি কৌণিক অভিব্যক্তি আছে যা $scope.callback(arg2) দেবে: $scope.callback(arg2) , যার ফলে 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]) );

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

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

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


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

আপনার এইচটিএমএল নির্দেশাবলী সহ যখন বন্ধনী বন্ধ করুন:

<my-directive callback="someFunction" />

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

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

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

<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-parameters এবং- function-parameters

আমি ফাংশনকে আরো স্বাভাবিক করে তুলতে এবং প্রকল্পে যে নেস্টিং সমস্যাটি সম্মুখীন হয়েছিল তা সমাধান করার জন্য আমি অপ্রকাশিত পদক্ষেপটি যোগ করেছি।


আপনি যদি @ lex82 মত উল্লেখ করে আপনার কলব্যাক ঘোষণা করেন

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

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

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

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

আপডেট : documentation এটির একটি ছোট উদাহরণ রয়েছে:

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


নির্দেশিকা ( 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 সুন্দরভাবে binds, এবং item সেট করা হয়।

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

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

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

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

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

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

উল্লেখ্য, এই সমাধানটির সাথে আপনার কলব্যাকটি আপনার বিচ্ছিন্ন সুযোগের সদস্য হওয়া দরকার না।





angularjs-scope