您的位置：首页 > Web前端 > JavaScript

angular ng-repeat渲染完后的执行事件

2018-01-23 18:21 141 查看

使用angular的ng-repeat时, 有时候需要在ng-repeat执行完后再执行js脚本

angular没用提供ng-repeat渲染完成的事件,但可以通过directive实现

假设我们需要在ng-repeat执行完后通过js脚本把图片设置成长宽相等

直接用jquery选择器$(“img”)或者document.getElementsByTagName(“img”)都获取不到需要的dom元素, 因为执行这些操作时, ng-repeat还没用执行完, 还不存在我们所需要的dom

上代码吧

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

<style type="text/css">
.container{
width:200px;
}

img{
width:50%;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="myController" class="container">
<ul>
<li ng-repeat="src in srcs" class="repeat-finish">
<img ng-src="{{src}}">
</li>
</ul>
</div>
</body>

<script type="text/javascript">
var myApp = angular.module('myApp', []);

myApp.controller("myController", function($scope){
$scope.srcs = ["../../img/clz_1.jpeg", "../../img/clz_5.jpeg", "../../img/clz_3.jpg"];
});

myApp.directive("repeatFinish", function(){
return{
//C代表class 表示通过类名调用指令, 需要使用驼峰命名repeat-finish repeatFinish
restrict:"C",
link:function(scope, element, attr){
if(scope.$last == true){
//这里面写ng-repeat渲染完后的事件

console.log("n-repeat 渲染完了!");

//这里是拿来举例,实际使用angular时应尽量避免直接操作dom
var imgs = document.getElementsByTagName("img");
for(var i = 0; i < imgs.length; i++){
imgs[i].height = imgs[i].width;
}
}
}
}
});
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： angular 前端前端框架 javascript javaee

相关文章推荐

新的分享

章节导航