web-dev-qa-db-fra.com

Accéder à l'élément cliqué dans angularjs

Je suis relativement nouveau dans AngularJS et soupçonne que je ne saisis pas un concept. J'utilise aussi Twitter Bootstrap _ et jQuery est chargé.

Flux de travail: l'utilisateur clique sur un lien dans une liste, la section "maître" est mise à jour et l'utilisateur de lien cliqué sur la classe active.

Balisage HTML de base:

<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>

Faire cela dans jQuery:

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

Mais je ne peux pas comprendre comment intégrer Angular et jQuery pour y parvenir, car j'utilise Angular pour récupérer la liste principale (sous forme JSON) sur le serveur et mettre à jour une liste sur la page.

Comment puis-je intégrer cela? Je n'arrive pas à trouver l'élément sur lequel j'ai cliqué une fois dans la fonction de contrôleur angular

Manette:

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

Bien que AngularJS vous permette d’atteindre un événement click (et donc une cible de celui-ci) avec la syntaxe suivante (notez l’argument $event de la fonction setMaster; documentation ici: http : //docs.angularjs.org/api/ng.directive: ngClick ):

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

ce n'est pas une façon très angulaire de résoudre ce problème. Avec AngularJS, l’accent est mis sur la manipulation du modèle. On muterait un modèle et laisser AngularJS calculer le rendu.

La manière angulaire de résoudre ce problème (sans utiliser jQuery et sans passer l'argument $event) serait:

<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>

où les méthodes dans le contrôleur ressemblent à ceci:

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

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

Voici l'intégralité de jsFiddle: http://jsfiddle.net/pkozlowski_opensource/WXJ3p/15/

282
pkozlowski.opensource