我这是第一次写博客文章。主要是因为工作中,同一个功能,能够实现和能够表达出来,前者可能就是会用,后者可能除了会用,不仅总结了经验,在写文章时还要更清楚一项技术的一些原理,学会怎么去表达。
原因:
如下代码,还未被ng-repeat遍历的这一部分元素,要等到js代码执行完成后,才能被完全渲染到页面,所以当页面加载到script标签里面的js代码时,$(“ul>li”)获取到的是3个li标签(这时还有一个没有被渲染,所以获取不到)。
<body ng-app="myApp" ng-controller="myController"><ul><li>aaa</li><!--ng-repeat遍历--><li ng-repeat="item in arr">{{item.name}}</li><li>aaa</li></ul><script>let app = angular.module("myApp",[]);app.controller("myController",function($scope){$scope.arr = [{id:1,name:"zhangsan"},{id:2,name:"lisi"}]})let lis = $("ul>li");console.log(lis);</script></body>
解决办法:
1.第一种方式:在这个位置加上定时器(原因是,等2秒之后,ng-repeat遍历的那部分li标签,完全被渲染到页面,$(“ul>li”)就能获取到被遍历的li节点了)
setTomeout(function(){let lis = $("ul>li");console.log(lis);//打印结果如下://jQuery.fn.init(4) [li, li.ng-binding.ng-scope, li.ng-binding.ng-scope, li, prevObject: jQuery.fn.init(1), context: document, selector: "ul>li"]},2000)
文章独白:写到这里,我突然发现上个月学习的angularJS中有个$timeout服务,在这里应该能排上用场。
2.第二种方式:使用angularJS中的 $timeout服务(就用这种方法)。
<script>let app = angular.module("myApp",[]);app.controller("myController",function($scope,$timeout){$scope.arr = [{id:1,name:"zhangsan"},{id:2,name:"lisi"}]$timeout(function(){console.log($("ul>li"))//打印输出:jQuery.fn.init(4) [li, li.ng-binding.ng-scope, li.ng-binding.ng-scope, li, prevObject: jQuery.fn.init(1), context: document, selector: "ul>li"]},2000)})</script>
结语:angularJS也是上个月自学的,肯定是学的也不深。所以哪里写得不好或者不足的,希望看到的读者能帮忙指出来,如果哪里有错,我好立即改正。