альтернатива "getElementById" в angularjs

проверить это PLNKR, у меня есть один список с ID myMenuList, этот идентификатор доступа в script.js на экране Numer of li и UL width by $scope.mml = angular.element(document.getElementById('myMenuList'));. Но в соответствии с требованием я не должен обращаться к нему в контроллере, как это. Есть ли альтернатива, которую мы можем сделать, сохраняя то же самое поведение?

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);
6
angularjs css html

4 ответов

Demo Plunker

реализовать директиву с изолированной областью для поощрения модульности и повторного использования:

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);
    }
  }
});

чтобы использовать его, инициализируйте выходную модель изнутри родительского контроллера:

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

место на ul элемент, и передайте ему модель, определенную ранее:

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

когда директива выполняется, она заполняет модель двумя свойствами, на которые вы можете ссылаться в своем HTML-код:

<p><b>Numer of 'li': {{output.numerofli}}</b></p>
<p><b>Width: {{output.ulwidth}}</b></p>
6

использовать только 

 var ele = angular.element('#id');
 var ulwidth = ele[0].clientWidth;
8

использовать селектор запросов

 angular.element( document.querySelector( '#id' ) );
2

в то время как другие ответы могут быть правильными на альтернативу getElementById, ваш код должен быть переписан угловым способом. Смотрите это plunker.

он должен отражать ваши требования в любом случае.

1