jquery in - Accéder à l'élément cliqué dans angularjs




project load (2)

Alors qu'AngularJS vous permet de mettre la main sur un événement click (et donc une cible) avec la syntaxe suivante (notez l'argument $event à 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 manière très angulaire de résoudre ce problème. Avec AngularJS, l'accent est mis sur la manipulation du modèle. On ferait muter un modèle et laisser AngularJS comprendre le rendu.

La façon AngularJS de résoudre ce problème (sans utiliser jQuery et sans avoir besoin de 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 ressemblerait à ceci:

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

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

Voici le complet jsFiddle: http://jsfiddle.net/pkozlowski_opensource/WXJ3p/15/

Je suis relativement nouveau à AngularJS et je soupçonne que je ne comprends pas un concept. J'utilise aussi Twitter Bootstrap et j'ai jQuery chargé.

Workflow: L'utilisateur clique sur un lien d'une liste, la section "master" est mise à jour et l'utilisateur du lien clique sur le gain de 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 n'arrive pas à comprendre comment intégrer Angular et jQuery pour y arriver, car j'utilise Angular pour aller chercher la liste principale (sous forme JSON) depuis 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 que je suis dans la fonction du contrôleur angulaire

Manette:

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

Exemple d'utilisation du contrôle visible pour adblocker activé:

$(document).ready(function(){
  if(!$("#ablockercheck").is(":visible"))
    $("#ablockermsg").text("Please disable adblocker.").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ad-placement" id="ablockercheck"></div>
<div id="ablockermsg" style="display: none"></div>

"ablockercheck" est un identifiant bloqué par adblocker. En vérifiant si elle est visible, vous êtes en mesure de détecter si adblocker est activé.





jquery angularjs