Angulaire obtenir décalage de l'élément par son id

J'ai essayer de mettre la barre de navigation li objet actif quand je suis actuellement regarder la section correspondante.
En d'autres termes: Lorsque vous faites défiler ma page (une seule page avec plusieurs sections), la section je suis en train d'observer doit être mis en surbrillance dans la barre de navigation.

J'ai déjà la position de défilement via la directive. Où je ne déclencher ng classe sur le .nav ul li.

<li class="" ng-class="{'active': $parent.scrollPos > document.getElementById('something').offset()}">
   <a class="" ng-click="isCollapsed = true" href="#something" du-smooth-scroll>Something</a>
</li>

Je ne fait aucune différence quand j'utilise

ng-class="{'active': $parent.scrollPos > angular.element('#something').offset()}"

Comment puis-je obtenir la distance à partir d'un document-dessus de n'importe quel élément?

Merci beaucoup.

PS: j'utilise jQuery (pas lite)!

MODIFIER
Comment ça marche (Merci à @Sharikov Vladislav):
Sur le corps j'utilise le "PageCtrl":

<body id="page-top" class="index bg-default" ng-app="previewApp" ng-controller="PageCtrl">

qui ressemble à ça:

angular.module('previewApp')
  .controller('PageCtrl', function($scope, $element) {
    $scope.scrollPos = 0;
    $scope.getOffset = function (elementId) {
      var element = $element.find(elementId);      
      return element.offset().top;
    };
  });

À droite après le corps, j'utilise une durée de

<span scroll-position="scrollPos"></span>

pour initialiser mon "scrollPosition"de la directive, ce qui me permet d'accéder à la position de défilement sur le $scope.scrollPos dans PageCtrl.
Directive:

angular.module('previewApp')
  .directive('scrollPosition', function ($window) {
    return {
      scope: {
        scrollPos: "=scrollPosition"
      },
      link: function (scope, element, attrs) {
        var windowElement = angular.element($window);
        var handler = function () {
          scope.scrollPos = windowElement.scrollTop();
        }
        windowElement.on('scroll', scope.$apply.bind(scope, handler));
        handler();
      }
    };
  });

Dans mon .nav ul li ressemble à la suivante. "- 150" est plus précis mettant en évidence.

<div class="navbar-collapse" uib-collapse="isCollapsed" id="menu-center">
   <ul class="nav navbar-nav navbar-right">
       <li class="hidden">
           <a href="#page-top"></a>
       </li>
       <li ng-class="{'active': $parent.scrollPos > $parent.getOffset('#section1') - 150 && $parent.scrollPos < $parent.getOffset('#section2') - 150}">
         <a ng-click="isCollapsed = true" href="#section1" du-smooth-scroll>Section1</a>
       </li>
       <li ng-class="{'active': $parent.scrollPos > $parent.getOffset('#section2') - 150 && $parent.scrollPos < $parent.getOffset('#section3')}">
         <a ng-click="isCollapsed = true" href="#section2" du-smooth-scroll>Section2</a>
       </li>                 
    </ul>
</div>

J'espère que cela aide quelqu'un qui est en difficulté sur le même problème que moi. Accueille

j'espère que l'aide de ce lien stackoverflow.com/questions/18953144/...

OriginalL'auteur Ore | 2015-11-23

5

Pas de pas de pas de. Faux! Vous ne devez pas utiliser jQuery, lorsque vous êtes en utilisant AngularJS. Injecter $element service dans votre contrôleur:

JavaScript:
```
myCtrl.$inject = ['$scope', '$element']; 
function myCtrl($scope, $element) {
 var element = $element.find('#someId');
 $scope.getOffset = function () {
  return element.offset().top;
 };
}
```
HTML:
```
<div ng-class='{ "active": getOffset() > xxx }'></div>
```
Vous n'avez pas à utiliser $(document) ou pur jQuery dans AngularJS à tous les.

Merci pour cela. Je suis conscient que ce n'est pas une bonne chose, mais il me manquait quelque chose, comme votre méthode. En fait, votre solution fonctionne bien, merci beaucoup. Je vais poster la réponse dès que je l'ai entièrement mis en œuvre.
Pourquoi pensez-vous que ce n'est pas bon? À l'aide de pure jQuery dans angularJS n'est pas bon 🙂 un Autre avantage de $element - vous n'avez pas de recherche dans le document complet, seulement dans l'élément avec ng-controller.
J'ai édité ma question avec la solution complète. Et oui, c'est ce que je voulais dire. À l'aide de quelque chose de pur js dans angulaire application provoque toujours des problèmes. C'est mon expérience.

OriginalL'auteur Sharikov Vladislav
1

vous pouvez essayer quelque chose comme:
```
$(document).scrollTop() > document.getElementById('something').offset().top
```
(mise en garde - je n'ai pas le temps de tester pour l'instant, mais sera plus tard)

Je vous suggère aussi de la sauvegarde de tous vos éléments Y des positions à consulter plutôt que de faire ce calcul à chaque fois

Depuis que j'ai utiliser les sections qui pourrait élargir et le double de sa hauteur, de sauver les positions Y peut être pas une bonne idée. Je vais tester votre suggestion dès que je suis en mesure de.
ne laissez-moi savoir comment vous vous y prenez comme je l'espère obtenir le temps de développer ce soir si vous n'avez pas résolu d'ici là
Merci pour la solution. Je n'ai pas le tester causer, comme @Sharikov Vladislav sayed, ce n'est pas agréable à utiliser pur jQuery Angulaire.
accepté sa solution, c'est une meilleure façon wihtin Angulaire où que la mienne visant à l'obtention de votre jQuery solution de travail

OriginalL'auteur Visualife
0

Utilisation .offset() pour obtenir la distance entre un élément et le haut du document:
```
angular.element(("li .active").offset().top
```
Par ce que vous essayez de rechercher un élément dans l'ensemble du document, pas besoin d'élément.

OriginalL'auteur Mukesh Kumar Bijarniya

Vous devez vous connecter pour publier un commentaire.