Question

选中此PLNKR，我有一个标识为myMenuList的列表，此ID正在script.js中访问，以显示Numer of li和UL width {{1} }}。但根据要求，我不应该像这样在控制器中访问它。我们可以通过保持相同的行为来做任何替代方案吗？

HTML CODE

$scope.mml = angular.element(document.getElementById('myMenuList'));

的JavaScript

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

Answer 1

仅限使用

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

Answer 2

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 = {};
  ...
});

将my-menu-list属性放在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>

Answer 3

使用查询选择器

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

Answer 4

虽然其他答案在getElementById的替代方案上可能是正确的，但您的代码应该以Angular方式重写。请参阅此plunker。

无论如何它应该反映你的要求。

替代“getElementById＆＃39;在angularjs

4 个答案: