AngularJS HTML 音频播放器答案

【问题标题】：AngularJS HTML audio playerAngularJS HTML 音频播放器
【发布时间】：2015-02-07 08:57:15
【问题描述】：

我正在使用 AngularJS 创建一个网页。我正在尝试播放页面完成加载时加载的音频文件。这是我正在使用的 html 代码：

<audio controls="controls">
     <source ng-src="{{audioFile}}" type="audio/mp3">
</audio>

这是我的 AngularJS 文件，其中音频播放器不播放任何内容。

angular.module('MyApp')
    .controller('MyCtrl', ['$scope', '$routeParams', 'Quiz',
        function ($scope, $routeParams, Quiz) {            
            $scope.quiz = Quiz.get({quizId: $routeParams.quizId}, function() {
                $scope.audioFile = "Link to some audioFile";
            });
        }
    ]);

但是当我跳过服务时，它可以在下面的代码中工作：

angular.module('MyApp')
    .controller('MyCtrl', ['$scope', '$routeParams', 'Quiz',
        function ($scope, $routeParams, Quiz) {            
             $scope.audioFile = "Link to some audioFile";
        }
    ]);

在等待服务响应时，有什么方法可以让这个工作？

【问题讨论】：

这段代码有几个问题会阻止运行。我相信它是手工编写的，而不是您项目中的代码。 DI 后缺少逗号，函数参数中的附加撇号，Quiz.get 后缺少括号。请提供准确的代码。并检查您在控制台中的内容。
您的 GET 实际上返回了正确的数据吗？
是的，我已经尝试过多次记录它，它提供了正确的数据。如果我复制该数据并将 $scope.audioFile 分配给我的 GET 之外的该值，它就可以工作。如果我复制数据并将 $scope.audioFile 分配给 Quiz.get 函数内的该数据，这也不起作用。我只是认为在 GET 函数中将正确的数据分配给 $scope.audioFile 时，我的 html 不会重新加载或其他原因

标签： angularjs angularjs-directive html5-audio angularjs-service

【解决方案1】：

This is a simple directive AngularJS 上的音频播放器。易于插入和使用，希望对您有所帮助。

<player-directive ng-controller="YourCtrl" playlist="{{Your.tracks}}"></player-directive>

【讨论】：