关于动态创建(ng-repeat)的li添加ng-click,不起效的解决方案

在项目中遇到一种情况:

<div id="hot" class="swiper-container hot" ng-app ="mhotVideo" ng-controller = "hotVideosctrl" ng-click="detail()">
<ul class="swiper-wrapper"><li class="swiper-slide" ng-repeat = "hotvideo in hotvideos track by $index">
<div class = "hotimg"><img src="{{hotvideo.wiki.screens[0].url}}" alt=""></div>
<div class = "hottip"></div>
<div class = "hottitle">{{hotvideo.wiki.title}}</div>
</li>
</ul>

</div>

看着好简单是不是?不好意思点击事件不起效。。。。。。

经过各种资料查询。最终采用下面的方案解决了

var mjsondata = {"action": "GetBackWikiInfo",
    。。。
};




$scope.mdetail = function(){
console.log("点击事件起效");
$http({
method:'post',
url:"/Epg",
data:mjsondata,
}).then(function(data){
console.log("详细信息请求发送成功");
$scope.detail = data.data.wiki.title;
console.log("视频详细信息:" + $scope.detail);
}).catch(function(){
alert("数据呢?");
});
};
// TODO 动态生成html中 ng-click无效 解决方法 $compile 是传进来的 
//下边这句话就是要写入页面中的内容,首先把你写入的内容赋值给html 
var html="<ul class='swiper-wrapper'><li class='swiper-slide' ng-repeat = 'hotvideo in hotvideos track by $index'><div class = 'hotimg'><a href='javascript:void(0);' ng-click = 'mdetail()'><img src='{{hotvideo.wiki.screens[0].url}}' alt=''></a></div><div class = 'hottip'></div><div class = 'hottitle'>{{hotvideo.wiki.title}}</div></li></ul>";
  
//用$compile进行编译 
var $html = $compile(html)($scope); 
  
//添加到页面中任何想添加的位置。}); 
  
$("#hot").append($html); 

猜你喜欢

转载自blog.csdn.net/weixin_40098371/article/details/80325679
今日推荐