angularjs中'getElementById'的替代品

Posted 2023-03-05

【中文标题】angularjs中\'getElementById\'的替代品

【英文标题】：alternative of 'getElementById' in angularjsangularjs中'getElementById'的替代品

【发布时间】：2014-11-02 11:56:41

【问题描述】：

检查这个PLNKR，我有一个ID 为myMenuList 的列表，这个ID 正在script.js 中访问以显示Numer of li 和UL width 由$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);

【参考方案1】：

仅供参考

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

【参考方案2】：

虽然在替代 getElementById 时其他答案可能是正确的，但您的代码应该以 Angular 方式重写。看到这个plunker。

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

【参考方案3】：

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>

【讨论】：

您也可以使用$parse 服务来缓解由隔离范围创建的观察者，而不是创建隔离范围。

【参考方案4】：

使用查询选择器

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