勾选此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);
实施具有隔离范围的指令，以鼓励模块化和重复使用：
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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句