我在让 HTMLAudioElement 在我的 angular.js 应用程序中工作时遇到问题。我正在使用 Controller 将该功能推送到我的播放按钮，但点击没有响应。我在 ng-click 指令内部有一个 playpause() 函数，但它仍然没有响应。我的代码运行时没有错误。有什么想法吗？
这是我的 Controller 代码:
angular.module('MainCtrl', []).controller('MainController', function($scope) {
$scope.audio = new Audio('../../data/mp3/pound.mp3');
$scope.currentNum = 0;
// tell audio element to play/pause, you can use $scope.audio.play()
$scope.playpause = function(){return $scope.audio.play();};
});
这是我的 html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="/">
<title>Starter Node and Angular</title>
<!-- CSS -->
<link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="libs\font-awesome\css\font-awesome.min.css">
<!-- JS -->
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<!-- ANGULAR CUSTOM -->
<script src="js/controllers/MainCtrl.js"></script>
<script src="js/controllers/NerdCtrl.js"></script>
<script src="js/services/NerdService.js"></script>
<script src="js/appRoutes.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="sampleApp" ng-controller="MainController">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Moozik</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- /.container -->
<div class="container-fluid player">
<span id="play" ng-click="playpause()" class="fa fa-play fa-4x"></span>
<span id="pause" class="fa fa-pause fa-4x"></span>
<span id="stop" class="fa fa-stop fa-4x"></span>
<span id="next" class="fa fa-fast-forward fa-4x pull-right"></span>
<span class="marquee pull-right col-xs-8">Hello</span>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
最佳答案
我强烈不建议将音频文件放入 $scope 中。只需将音频引用存储在您的指令中，例如:
var myAudio = new Audio('../../data/mp3/pound.mp3');
$scope.play = function(){
myAudio.play();
};
关于javascript - 使用 Angular js 的 Controller 中的函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28118507/