jquery - Angularjs में क्लिक तत्व का उपयोग



(1)

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

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

यह इस समस्या को हल करने का बहुत कोणीय तरीका नहीं है। AngularJS के साथ फोकस मॉडल हेरफेर पर है। एक मॉडल को बदल देगा और 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;
}

यहां पूर्ण jsFiddle है: http://jsfiddle.net/pkozlowski_opensource/WXJ3p/15/

मैं 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);
        }
    }




angularjs