检查这个PLNKR,我有一个idmyMenuList
的列表,这个id正在访问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);
最佳答案
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>