Angularjs এ ক্লিক করা উপাদানটিতে অ্যাক্সেস করা হচ্ছে

Question

আমি অ্যাঙ্গুলারজেএস-তে তুলনামূলকভাবে নতুন এবং সন্দেহ করছি যে আমি কোনও ধারণাটি আঁকছি না। আমি টুইটার বুটস্ট্র্যাপও ব্যবহার করছি এবং আমি jQuery বোঝা পেয়েছি।

কর্মপ্রবাহ: ব্যবহারকারী একটি তালিকা থেকে একটি লিঙ্ক ক্লিক করে, "মাস্টার" বিভাগ আপডেট করা হয়েছে এবং লিঙ্ক ব্যবহারকারীরা সক্রিয় শ্রেণীর উপর ক্লিক করেছেন active

বেসিক এইচটিএমএল মার্কআপ:

<ul class="list-holder" ng-controller="adminController">
   <li><a ng-click="setMaster('client')">Clients</li>
   <li><a ng-click="setMaster('employees')">Employees</li>
   <li><a ng-click="setMaster('etc')>Etc...</li>
</ul>

JQuery এ করছেন:

jQuery(".list-holder").on('click', 'a', function(event){
    event.preventDefault();
jQuery(".list-holder li").removeClass('active');
jQuery(this).parent('li').addClass('active');
});

তবে এটি সম্পন্ন করার জন্য কৌণিক এবং jQuery কীভাবে সংহত করা যায় তা আমি বুঝতে পারি না, কারণ আমি সার্ভার থেকে মাস্টার তালিকাটি (জেএসএন আকারে) আনতে এবং পৃষ্ঠায় একটি তালিকা আপডেট করার জন্য অ্যাঙ্গুলার ব্যবহার করছি।

আমি কীভাবে এটি একীভূত করব? আমি কৌনিক নিয়ামক ফাংশনের ভিতরে আসার পরে আমি যে উপাদানটি ক্লিক করেছি সেটিকে খুঁজে পাবে না

নিয়ন্ত্রক:

function adminController($scope)
    {    
        $scope.setMaster = function(obj)
        {
            // How do I get clicked element's parent li?
            console.log(obj);
        }
    }

Answer 1

অ্যাঙ্গুলারজেএস আপনাকে নীচের সিনট্যাক্সের সাহায্যে ক্লিকের ইভেন্টে (এবং এটির একটি লক্ষ্য হিসাবে) হাত পেতে অনুমতি দেয় ( ফাংশনটির $eventপক্ষে যুক্তিটি নোট করুন setMaster; ডকুমেন্টেশন এখানে: http://docs.angularjs.org/api/ng.directive : এনজি ক্লিক ):

function AdminController($scope) {    
  $scope.setMaster = function(obj, $event){
    console.log($event.target);
  }
}

এই সমস্যাটি সমাধান করার পক্ষে এটি খুব কৌনিক উপায় নয়। অ্যাঙ্গুলার জেএসের সাথে ফোকাসটি মডেল কারসাজির দিকে। এক একটি মডেল পরিবর্তন করতে এবং AngularJS রেন্ডারিং খুঁজে বের করতে হবে।

এই সমস্যাটি সমাধান করার অ্যাঙ্গুলারজেএস-উপায় (jQuery ব্যবহার না করে এবং যুক্তিটি পাস করার প্রয়োজন ছাড়াই$event ) হবে:

<div ng-controller="AdminController">
    <ul class="list-holder">
        <li ng-repeat="section in sections" ng-class="{active : isSelected(section)}">
            <a ng-click="setMaster(section)">{{section.name}}</a>
        </li>
    </ul>
    <hr>
    {{selected | json}}
</div>

যেখানে নিয়ামকের পদ্ধতিগুলি দেখতে এই রকম হয়:

$scope.setMaster = function(section) {
    $scope.selected = section;
}

$scope.isSelected = function(section) {
    return $scope.selected === section;
}

এখানে সম্পূর্ণ jsFiddle: http://jsfiddle.net/pkozlowski_opensource/WXJ3p/15/

Comments

এফওয়াইআই: $ ইভেন্টটি মার্কআপে পাস না করা হলে কাজ করে না: ng-click="setMaster(section, $event)"কেবল একটি মাথা উপরে।

— বেন লেশ

আসলেই নয়, এটি ফাংশনে যেতে হবে। বাস্তবে, যদিও, এটি আপনার নিয়ামকটিতে ডোম-নির্দিষ্ট জিনিসগুলির মতো উল্লেখ করা সম্ভবত সেরা ধারণা নয়। সাধারণত যখন $ ইভেন্টটি ব্যবহৃত হয়, তখন এটি প্রচার বন্ধ করার মতো বা এই জাতীয় প্রসঙ্গে: <a ng-click="doSomething(); $event.stopPropagation()">Click Just Me</a>

— বেন লেশ

আমার button ইভেন্ট.আরগারেটটি ব্যবহার করতে সমস্যা হয়েছিল কারণ আমার বোতামটির ভিতরে আইকন ছিল। সুতরাং, কখনও কখনও টার্গেটের ফলাফলটি বোতাম হয় এবং কখনও কখনও আইকন হয় (যেখানে আমি ক্লিক করেছি তার উপর নির্ভর করে)। আমি টার্গেটের পরিবর্তে $ ইভেন্ট.কেন্দ্রিয় টার্গেট ব্যবহার করেছি এবং এটি একটি কবজির মতো কাজ করেছে।

— লাও

যদিও এটির $event.targetমতো ব্যবহার করা "কৌণিক উপায়ে" নাও লাগতে পারে বলে মনে হয় যে কোনও ng-repeatআইটেমের সাথে একটি বৃহত তালিকা থাকা কোনও পরিবর্তনের মূল্যায়ন করার জন্য শ্রোতার প্রয়োজন? একটি উপাদানটিতে ক্লিক করা মানে পুরো তালিকার প্রতিটি আইটেমটি আবারও মূল্যায়ন করা উচিত? - $event.targetউদাহরণস্বরূপ কোনও সিএসএস ক্লাস টগল করার জন্য কেবল সেই আইটেমটিকে কেন টার্গেট করবেন না । আপনি কি মনে করেন? আমি একটি ফোনগ্যাপ অ্যাপে কাজ করছি এবং আমি যতটা পারফরম্যান্স তা করতে পারছি তা নিবারণের প্রয়োজন।

— ব্র্যাডলি বন্যা

আমি $event.currentTargetপরিবর্তে ব্যবহার করার পরামর্শ দিতে চাই $event.target। এনজি-ক্লিক সহ উপাদানটিতে যদি চাইল্ড এলিমেন্ট থাকে তবে চাইল্ড এলিমেন্টটি ক্লিক করা হলে এটি শিশু উপাদান $event.targetহয়ে যায়। $event.currentTargetমনোনীত এনজি-ক্লিকের মাধ্যমে উপাদানটি সর্বদা লক্ষ্যবস্তু করবে।

— জিন পার্সেল্লানো