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




angularjs-directive angularjs-scope (2)

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

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 ক্লিক করা হলে, এই ত্রুটিটি কনসোলটিতে উপস্থিত হয়:

প্রকারের ত্রুটি: 1-এ 'editWebite' অনুসন্ধান করতে 'ইন' অপারেটর ব্যবহার করতে পারবেন না

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


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

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

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


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

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

দীর্ঘ বিবরণ

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

যেমন। আপনি boundFunction('cats') বলেছিলেন 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})
  }
}




angularjs-scope