Accéder à un clic sur élément dans angularjs

Question

Je suis relativement nouveau à AngularJS et pense que je ne suis pas saisir d'un concept. Je suis également en utilisant Twitter Bootstrap et j'ai jQuery chargé.

Flux de travail: l'Utilisateur clique sur un lien à partir d'une liste, "maître" de la section est mise à jour et le lien de l'utilisateur a cliqué sur les gains en classe active.

Base de Balisage 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>

Le faire en 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 Angulaire et jQuery pour obtenir ce fait, parce que je suis en utilisant Angulaire pour récupérer la liste de référence (en JSON forme) à partir du serveur et mettre à jour une liste sur la page.

Comment faire pour intégrer ce? Je n'arrive pas à trouver l'élément que j'ai cliqué sur une fois que je suis à l'intérieur de l'angulaire de la fonction de contrôleur

Contrôleur:

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

Answer 1

Alors que AngularJS vous permet d'obtenir une main sur un événement de clic (et donc une cible de celui-ci) avec la syntaxe suivante (notez l' $event argument de la setMaster de la fonction; la 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 très angulaires-le moyen de résoudre ce problème. Avec AngularJS l'accent est mis sur le modèle de la manipulation. On pourrait muter un modèle et laissez AngularJS comprendre rendu.

Le AngularJS-façon de résoudre ce problème (sans l'aide de jQuery et sans la nécessité de passer à l' $event argument) 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>

lorsque les méthodes dans le contrôleur devrait ressembler à ceci:

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

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

Voici la jsFiddle: http://jsfiddle.net/pkozlowski_opensource/WXJ3p/15/