检查这个PLNKR,我有一个idmyMenuList的列表,这个id正在访问script.js以显示Numer of liUL widthby$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);

最佳答案

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>

07-24 19:23
查看更多