कोणीयज में क्लिक किए गए तत्व तक पहुंचना

173

मैं AngularJS के लिए अपेक्षाकृत नया हूं और मुझे संदेह है कि मैं एक अवधारणा को नहीं समझ रहा हूं। मैं भी ट्विटर बूटस्ट्रैप का उपयोग कर रहा हूं और मुझे jQuery लोड हो गया है।

वर्कफ़्लो: उपयोगकर्ता एक सूची से एक लिंक पर क्लिक करता है, "मास्टर" अनुभाग अपडेट किया जाता है और लिंक उपयोगकर्ता सक्रिय वर्ग पर क्लिक करता है।

मूल HTML मार्कअप:

<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 को कैसे एकीकृत किया जाए, क्योंकि मैं सर्वर से मास्टर सूची (JSON फॉर्म में) लाने के लिए कोणीय का उपयोग कर रहा हूं और पृष्ठ पर एक सूची अपडेट कर रहा हूं।

मैं इसे कैसे एकीकृत करूं? मैं उस तत्व को खोजने के लिए प्रतीत नहीं हो सकता, जिसे मैंने कोणीय नियंत्रक फ़ंक्शन के अंदर एक बार क्लिक किया है

नियंत्रक:

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

jquery angularjs

— आर डाउन
स्रोत

283

जबकि एंगुलरजेएस आपको निम्न सिंटैक्स के साथ एक क्लिक इवेंट (और इस तरह इसका एक लक्ष्य) पर हाथ पाने की अनुमति देता है ( फ़ंक्शन के $eventतर्क पर ध्यान दें setMaster; यहां प्रलेखन: http://docs.angularjs.org/api/ng.directive : ngClick ):

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

यह इस समस्या को हल करने का बहुत कोणीय तरीका नहीं है। AngularJS के साथ मॉडल हेरफेर पर ध्यान केंद्रित किया गया है। कोई एक मॉडल को म्यूट करेगा और एंगुलरजेएस को प्रतिपादन करने देगा।

इस समस्या को हल करने का 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;
}

यहाँ पूरा jsField है: http://jsfiddle.net/pkozlowski_opensource/WXJ3p/15/

— pkozlowski.opensource
स्रोत

198

FYI करें: $ घटना तब तक काम नहीं करती जब तक वह मार्कअप में पास नहीं हो जाती: ng-click="setMaster(section, $event)"बस एक सिर।

— बेन लैश

वास्तव में नहीं, इसे समारोह में पारित करना होगा। वास्तविकता में, हालांकि, आपके नियंत्रक में इस तरह डोम-विशिष्ट सामान को संदर्भित करना सबसे अच्छा विचार नहीं है। आम तौर पर जब $ घटना का उपयोग किया जाता है, तो यह प्रचार को रोकने या इस तरह के संदर्भ में होता है: <a ng-click="doSomething(); $event.stopPropagation()">Click Just Me</a>

— बेन लेश

मुझे $ event.target का उपयोग करने में समस्या थी क्योंकि मेरे बटन के अंदर एक आइकन था। तो, कभी-कभी लक्ष्य परिणाम बटन होता है और कभी-कभी आइकन होता है (जहां मैंने क्लिक किया था) के आधार पर। मैंने टारगेट के बजाय $ Event.currentTarget का उपयोग किया और यह एक आकर्षण की तरह काम किया।

— la

हालांकि $event.targetइस तरह का उपयोग करना "कोणीय तरीका" नहीं हो सकता है, मुझे लगता है कि ng-repeatबदलाव का मूल्यांकन करने के लिए श्रोता की आवश्यकता वाली प्रत्येक वस्तु के साथ एक बड़ी सूची होना कुशल नहीं है? एक तत्व पर क्लिक करने का मतलब होगा कि पूरी सूची के प्रत्येक आइटम का पुनर्मूल्यांकन सही होना चाहिए? - $event.targetउदाहरण के लिए CSS क्लास को टॉगल करने के साथ सिर्फ एक आइटम को ही क्यों न लक्षित करें । तुम क्या सोचते हो? मैं एक Phonegap ऐप पर काम कर रहा हूं और मेरे द्वारा किए जाने वाले हर प्रदर्शन को निचोड़ने की जरूरत है।

— ब्रैडली बाढ़

मैं $event.currentTargetइसके बजाय उपयोग करने की सलाह देना चाहूंगा $event.target। यदि एनजी-क्लिक वाले तत्व में बाल तत्व हैं, यदि बाल तत्व पर क्लिक किया गया है तो वह बाल तत्व $event.targetबन जाता है। $event.currentTargetहमेशा निर्दिष्ट एनजी-क्लिक वाले तत्व को लक्षित करेगा।

— १०:३६ में जीन पैरालानो