JavaScript音频播放器插件在AngularJS应用中加倍标记
JavaScript audio player plugin doubling markup in AngularJS app
我有一个Angular应用程序,它从数据库中提取了许多音频文件。我使用Anthony Kolber的audio.js作为HTML5播放器,其中相关的包装器和html是从javascript生成的。问题是加价翻了一倍,我不知道为什么。当设置加载条和进度条的宽度时,它会导致一个连续的"未定义"错误。
javascript很长,很难粘贴到这里。我用这里的代码创建了这个问题的简化版本,并在这里做了一个实时演示。
原HTML:
<!-- audio links -->
<div ng-repeat="audio in medias | orderBy: 'track'" my-repeat-directive>
<span><em>{{audio.title}}</em></span>
<audio src="" dynamic-url dynamic-url-src="{{audio.url}}" preload="auto" />
</div>
呈现的HTM:
<div ng-repeat="audio in medias | orderBy: 'track'" my-repeat-directive="" class="ng-scope">
<span><em class="ng-binding">Glass Jungle 1</em></span>
<div class="audiojs loading" classname="audiojs" id="audiojs_wrapper0">
<div class="audiojs " classname="audiojs" id="audiojs_wrapper3">
<audio src="audio_files/Glass_Jungle_sample1.mp3" dynamic-url="" dynamic-url-src="Glass_Jungle_sample1.mp3" preload="auto"></audio>
<div class="play-pause">
<p class="play"></p>
<p class="pause"></p>
<p class="loading"></p>
<p class="error"></p>
</div>
<div class="scrubber">
<div class="progress" style="width: 0%;"></div>
<div class="loaded" style="width: 100%;"></div>
</div>
<div class="time">
<em class="played">00:00</em>/<strong class="duration">01:25</strong>
</div>
<div class="error-message"></div>
</div>
<div class="play-pause">
<p class="play"></p>
<p class="pause"></p>
<p class="loading"></p>
<p class="error"></p>
</div>
<div class="scrubber">
<div class="progress"></div>
<div class="loaded"></div>
</div>
<div class="time">
<em class="played">00:00</em>/<strong class="duration">00:00</strong>
</div>
<div class="error-message"></div>
</div>
我下载了你的代码并简化了一下,它为我工作了:
<!-- audio links -->
<div ng-repeat="audio in medias | orderBy: 'track'">
<span><em>{{audio.title}}</em></span>
<audio src="" dynamic-url dynamic-url-src="{{audio.url}}" preload="auto" />
</div>
<!-- JavaScript -->
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- angularJS -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<!-- AngularJS Scripts -->
<script>
var app = angular.module('myApp', []);
app.controller('mainCtrl', function($scope, $rootScope) {
$scope.medias = [{
"track": 1,
"title": "Glass Jungle 1",
"url": "Glass_Jungle_sample1.mp3"
}, {
"track": 2,
"title": "Glass Jungle 2",
"url": "Glass_Jungle_sample2.mp3"
}, {
"track": 3,
"title": "Glass Jungle 3",
"url": "Glass_Jungle_sample3.mp3"
}];
audiojs.events.ready(function() {
var as = audiojs.createAll();
});
});
app.directive('dynamicUrl', function() {
return {
restrict: 'A',
link: function postLink(scope, element, attr) {
element.attr('src', 'audio_files/' + attr.dynamicUrlSrc);
}
};
});
</script>
其余部分相同。我没有深入研究你的代码有问题的原因,自从我用angular工作以来已经有一段时间了,但我认为它与myRepeatDirective有关,它被执行了3次,一次用于每个音频文件。我猜标记只重复了两次,因为第二次通过它遇到了javascript错误,以防止它执行第三次。
相关文章:
- 在AngularJS应用程序中使用封装指令和路由的推荐方式是什么
- angularjs+rails应用程序中未显示模板
- Angularjs-utils高亮过滤器在搜索时破坏应用程序
- 我想在AngularJS应用程序中创建一个输入数字框,用户不应该在该框上键入十进制数字.(一个整数输入框)
- Ionic和angularjs嵌套步骤应用程序
- AngularJS指令部分应用的函数don'不起作用
- 如何在AngularJS应用程序的主体上动态设置溢出
- 如何正确应用Angularjs ng repeat
- AngularJs Cordova安卓应用程序中输入的4位密码PIN验证
- HTML 标记未在 AngularJS ckEditor 中应用,而是在 Ediator 中显示 HTML 元素标记代码
- 如何使用AngularJS应用Breadcrum
- 在AngularJS中的另一个ng应用程序中使用来自一个ng程序的Cookie值
- 使用AngularJS制作一个类似电子表格的应用程序
- 使用angularjs和node.js时的Web应用程序文件夹结构
- 如何使用AngularJS应用基于Json字符串响应的条件CSS类
- 如何使用Node.js/MongoDB在AngularJS应用程序中获取特定于目标的数据
- 仅客户端AngularJS应用程序
- 如何使用onDeviceReady设置AngularJS应用程序并初始化Cordova的功能
- 在单击“应用”按钮后应用angularjs过滤器
- 复选框在应用 AngularJS 过滤器后取消选中自身