ajax数据请求和多个音频的点击事件随笔

事件：

1：在angularJS中，AJAX请求回来的数据需要使用$scope.$apply（function（）{$scope.reply = replyArr}）进行实时刷新

2：在angularJS中，在ng-repeat循环中的点击事件只有通过ng-click=“dian($index)”，并且在js中需要$scope.dian = function($index){}

3：$index点击当前事件源所在的循环列表ng-repeat中的位置。

html代码

<div class="all" ng-app="ionicApp" ng-controller="test">

<li ng-repeat="data in reply">
<div class="info-left">
<div><img src="{{data.userImg}}" /></div>
<div><img src="{{data.grade}}" /></div>
</div>
<div class="info-right">
<p ng-bind="data.userName"></p>
<p ng-bind="data.info"></p>

<div class="t-voice" ng-click="audioPlay($index)">
<i class="voice-icon"></i>
<span class="voice-length"><i class="video-time">50</i>“</span>

</div>

<b>4分钟前</b>
</div>
</li>
<audio class="myaudio" type="audio/mp3">
</audio>
<audio class="myaudio" type="audio/mp3">
</audio>
<audio class="myaudio" type="audio/mp3">
</audio>
<audio class="myaudio" type="audio/mp3">
</audio>
<audio class="myaudio" type="audio/mp3">
</audio>

</div>

js代码

var app = angular.module('ionicApp', ['ionic']);
app.controller('test', ['$scope','$sce', function($scope,$sce) {
//数据请求
var Iurl='http://api.******.com/about/h5/?key=2'
$.ajax({
type: 'get',
url: Iurl,
dataType: 'json',
success: function(data) {
if(data.data==null){
$('.shangchuan').css('display','block');
$('.h-info').css('display','none')
}else{
var replyArr = data.data.reply;
for(var i=0;i<replyArr.length;i++){
$('.myaudio').eq(i).attr('src',replyArr[i].myaudio)
}
$scope.$apply(function(){
$scope.reply = replyArr;
})
}
},
error: function() {
console.log('网络异常加载失败！')
}
})


//点击事件
var num=9;
$scope.audioPlay= function($index){
var myaudio=$('.myaudio')[$index];
if(num==9){
console.log('1')
myaudio.play();
$('.voice-icon').eq($index).addClass('voice-play');
num=$index;
}else if(num==$index){
console.log('2')
if(myaudio.paused){
myaudio.play()
$('.voice-icon').eq($index).addClass('voice-play');
num=$index;
}else{
myaudio.pause();
$('.voice-icon').removeClass('voice-play');
}
}else{
num=$index;
console.log('3')
//点击非当前播放内容
for(var i=0;i<$('.myaudio').length;i++){
$('.myaudio')[i].pause();
$('.myaudio')[i].currentTime=0;
}
$('.voice-icon').removeClass('voice-play');

myaudio.play()
$('.voice-icon').eq($index).addClass('voice-play');
var is_playFinish = setInterval(function() {
if (myaudio.ended) {
$('.voice-icon').eq($index).removeClass('voice-play');
clearInterval(is_playFinish);
}
}, 10);
}
}

}])

注：

1：引用时jq或者是zepto需要放到自己写的js前面，自己写的js需要放到ionic.bundle.js前面

2：如果是将audie放到data in reply中去循环，那么audio的ng-src不能直接写data.audioAddress,这个地方有一个

3：如果将audio放到循环中的解决方法是

 $scope.trustSrc = $sce.trustAsResourceUrl("http://fanyi.youdao.com/");

将trustSrc放到ng-src="{{trustSrc}}"（单个能放）

但是这里有一个问题，有多个解析出来的不同的url地址，使用$sce后怎么放到ng-src中。问题待解决中。。。。。。

引用：

AngularJS 使用$sce控制代码安全检查

由于浏览器都有同源加载策略，不能加载不同域下的文件、也不能使用不合要求的协议比如file进行访问。

在angularJs中为了避免安全漏洞，一些ng-src或者ng-include都会进行安全校验，因此常常会遇到一个iframe中的ng-src无法使用。

SCE，即strict contextual escaping,我的理解是 严格的上下文隔离 ...翻译的可能不准确，但是通过字面理解，应该是angularjs严格的控制上下文访问。

由于angular默认是开启SCE的，因此也就是说默认会决绝一些不安全的行为，比如你使用了某个第三方的脚本或者库、加载了一段html等等。

$sce.trustAsHtml(value);$sce.trustAsUrl(value);$sce.trustAsResourceUrl(value);$sce.trustAsJs(value);