带有angular度js的控制器中的函数
我有一个问题让HTMLAudioElement在我的angular.js应用程序中工作。 我正在使用控制器将function推到我的播放button，但点击是无响应的。 我有在ng-click指令内的函数作为playpause（），但它仍然没有响应。 我的代码运行时没有错误。 有任何想法吗？
这是我的控制器代码：
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>
我强烈build议不要将audio文件放入$ scope。 只需将audio参考存储在您的指令中，如：
var myAudio = new Audio('../../data/mp3/pound.mp3'); $scope.play = function(){ myAudio.play(); };