AngularJS নির্দেশক উপাদান পদ্ধতি বাঁধাই - প্রকারের ত্রুটি: 1 তে 'ফাংশননেম' অনুসন্ধান করতে 'ইন' অপারেটরটি ব্যবহার করা যায় না

Question 1

এটি মূল টেমপ্লেটের নিয়ামক:

app.controller('OverviewCtrl', ['$scope', '$location', '$routeParams', 'websiteService', 'helperService', function($scope, $location, $routeParams, websiteService, helperService) {
    ...     
    $scope.editWebsite = function(id) {
        $location.path('/websites/edit/' + id);
    };
}]);

এটি নির্দেশ:

app.directive('wdaWebsitesOverview', function() {
    return {
        restrict: 'E',
        scope: {
            heading: '=',
            websites: '=',
            editWebsite: '&'
        },
        templateUrl: 'views/websites-overview.html'
    }
});

মূল টেমপ্লেটে নির্দেশিকাটি এভাবে প্রয়োগ করা হয়:

<wda-websites-overview heading="'All websites'" websites="websites" edit-website="editWebsite(id)"></wda-websites-overview>

এবং এই পদ্ধতিটি ডাইরেক্টিভ টেম্পলেট (ওয়েবসাইট-ওভারভিউ html) থেকে কল করা হয়:

<td data-ng-click="editWebsite(website.id)">EDIT</td>

প্রশ্ন: EDIT ক্লিক করা হলে, এই ত্রুটিটি কনসোলটিতে উপস্থিত হয়:

প্রকারের ত্রুটি: ২০১৩ সালে 'সম্পাদনা ওয়েবসাইট' অনুসন্ধান করতে 'ইন' অপারেটর ব্যবহার করতে পারে না

কেউ কি জানেন এখানে কী চলছে?

Question 2

যেহেতু আপনি একটি এক্সপ্রেশন বাইন্ডিং ( &) সংজ্ঞায়িত করেছেন , তাই আপনি idযদি এটি এইচটিএমএল হিসাবে আবদ্ধ করতে চান তবে আপনাকে অবশ্যই এটির সাথে কোনও বস্তুর আক্ষরিক পরামিতি সহ কল করতে হবে edit-website="editWebsite(id)"।

প্রকৃতপক্ষে, কৌণিককে idআপনার HTML এ কী আছে তা বোঝার দরকার রয়েছে এবং এটি যেহেতু এটি আপনার সুযোগের অংশ নয়, তাই আপনার কলের সাথে "স্থানীয়" নামে পরিচিত যা আপনার প্রয়োজন তা যুক্ত করতে হবে:

data-ng-click="editWebsite({id: website.id})"

বা বিকল্প হিসাবে:

data-ng-click="onClick(website.id)"

নিয়ামক / লিঙ্ক কোড সহ:

$scope.onClick = function(id) {
  // Ad "id" to the locals of "editWebsite" 
  $scope.editWebsite({id: id});
}

অ্যাঙ্গুলারজেএস এর ডকুমেন্টেশনে এর ব্যাখ্যা অন্তর্ভুক্ত করে; "close({message: 'closing for now'})"নিম্নলিখিত ইউআরএল জড়িত উদাহরণ সন্ধান করুন :

https://docs.angularjs.org/guide/directive

Question 3

টিএল; ডিআর; - আপনি ধরে নিচ্ছেন যে বাউন্ড ফাংশনটি শিশু উপাদানকে দেওয়া হচ্ছে। এটি ভুল। প্রকৃতপক্ষে, AngularJS স্ট্রিং টেম্পলেটটিকে বিশ্লেষণ করছে এবং একটি নতুন ফাংশন তৈরি করছে, যা পরে পিতামাতাকে ফাংশন বলে।

এই ফাংশনটির জন্য একটি সরল ভেরিয়েবলের পরিবর্তে কী এবং মান সহ একটি বস্তু গ্রহণ করা দরকার।

দীর্ঘ বিবরণ

এটি যখন ঘটে আপনি '&' ব্যবহার করে কোনও ফাংশন বেঁধে রেখেছেন এবং আপনার নিয়ামকের কাছ থেকে সেই ফাংশনটি কল করার চেষ্টা করেছেন, প্লেইন ভেরিয়েবলের নাম সম্বলিত কোনও বস্তুর পরিবর্তে একটি প্লেইন ভেরিয়েবল পাস করছেন। বাউন্ড ফাংশনে মানগুলি কীভাবে পাস করতে হয় তা কার্যকর করার জন্য টেম্প্লেটিং ইঞ্জিন দ্বারা অবজেক্ট কীগুলি প্রয়োজন।

যেমন আপনি boundFunction('cats')বরং চেয়েছিলেনboundFunction({value: 'cats'})

কাজের উদাহরণ

বলুন আমি এর মতো একটি উপাদান তৈরি করেছি:

const MyComponent = {
  bindings: {
    onSearch: '&'
  },
  controller: controller
};

এই ফাংশনটি (পিতামাতার মধ্যে) এর মতো দেখাচ্ছে:

onSearch(value) {
  // do search
}

আমার প্যারেন্ট টেম্পলেটে, আমি এখন এটি করতে পারি:

<my-component on-search="onSearch(value)"></my-component>

এখানে বাইন্ডিংটি স্ট্রিং থেকে পার্স করা হবে। আপনি আসলে ফাংশনটি পাস করছেন না। AngularJS আপনার জন্য একটি ফাংশন তৈরি করছে যা ফাংশনটিকে কল করে। টেমপ্লেটে তৈরি বাইন্ডিংয়ে ফাংশন কল ব্যতীত প্রচুর জিনিস থাকতে পারে।

কৌনিক জেএসকে কোথা থেকে কোথা থেকে আসা উচিত তা কার্যকরী করা দরকার valueএবং এটি পিতামাতার কাছ থেকে কোনও বস্তু গ্রহণ করে এটি করে।

আমার কম্পোনেন্ট নিয়ন্ত্রকটিতে আমাকে এর মতো কিছু করতে হবে:

handleOnSearch(value) {
  if (this.onSearch) {
    this.onSearch({value: value})
  }
}