alternative de "getElementById" dans angularjs

Cochez cette PLNKR, j'ai une liste avec id myMenuList, ce code d'suis accédant à script.js pour afficher Numer of li et UL width par $scope.mml = angular.element(document.getElementById('myMenuList'));.
Mais selon l'exigence que je ne devrais pas être accéder au contrôleur de ce genre. Est-il une alternative, nous pouvons le faire en gardant le même comportement?

CODE HTML

  <div class="menucontainer left">
   <ul id="myMenuList" ng-style="myStyle">
     <li ng-repeat="item in items"> <a href="#">{{item.name}}</a>        </li>
   </ul>
 </div>

JavaScript

 $scope.mml = angular.element(document.getElementById('myMenuList'));
 $timeout(function() {
   $scope.numerofli = $scope.mml.find('li').length;
    $scope.ulwidth = $scope.mml[0].clientWidth;
 }, 1000);
InformationsquelleAutor ankitd | 2014-09-09
  1. 7

    Démo Plunker

    Mettre en œuvre une directive isolées à même d'encourager la modularité et la réutilisation:

    app.directive('myMenuList', function($timeout) {
  return {
    restrict: 'A',
    scope: { 
      myMenuList: '='
    },
    link:function($scope, $element, $attr) {
      $timeout(function(){
          $scope.myMenuList.numerofli= $element.find('li').length  ;
          $scope.myMenuList.ulwidth= $element[0].clientWidth;
      }, 1000);
    }
  }
});

    Pour l'utiliser, initialiser un modèle de sortie à partir de l'intérieur de votre contrôleur de parent:

    app.controller('scrollController', function($scope, $timeout) {
  $scope.output = {};
  ...
});

    Lieu le my-menu-list attribut sur la ul élément, et de passer le modèle défini précédemment:

      <ul my-menu-list="output" ng-style="myStyle">
    <li ng-repeat="item in items"> <a href="#">{{item.name}}</a>
    </li>
  </ul>

    Lorsque la directive s'exécute, il va remplir le modèle avec deux propriétés, que vous pouvez ensuite faire référence dans votre code HTML:

    <p><b>Numer of 'li': {{output.numerofli}}</b></p>
<p><b>Width: {{output.ulwidth}}</b></p>
    • Au lieu de créer un isolé champ d'application, vous pouvez également utiliser le $parse service pour atténuer les observateurs créé par l'isolat étendues.
    InformationsquelleAutor pixelbits
  2. 9

    Utiliser uniquement 

     var ele = angular.element('#id');
 var ulwidth = ele[0].clientWidth;
    InformationsquelleAutor Shohel
  3. 2

    Utiliser la requête sélecteur de

     angular.element( document.querySelector( '#id' ) );
    InformationsquelleAutor cs1193
  4. 1

    Tandis que les autres réponses peuvent être correctes sur l'alternative de getElementById, votre code doit être réécrite sous l'angle de la voie. Voir ce plunker.

    Il devrait tenir compte de vos exigences, de toute façon.

    InformationsquelleAutor Kenny Ki