Javascript 具有角度js的控制器中的函数
我在angular.js应用程序中使用HtmlLaudioElement时遇到问题。我正在使用控制器将功能按到播放按钮,但单击没有响应。我在ng click指令中使用了函数playpause(),但它仍然没有响应。我的代码运行时没有错误。有什么想法吗 这是我的控制器代码:Javascript 具有角度js的控制器中的函数,javascript,angularjs,node.js,controller,Javascript,Angularjs,Node.js,Controller,我在angular.js应用程序中使用HtmlLaudioElement时遇到问题。我正在使用控制器将功能按到播放按钮,但单击没有响应。我在ng click指令中使用了函数playpause(),但它仍然没有响应。我的代码运行时没有错误。有什么想法吗 这是我的控制器代码: angular.module('MainCtrl', []).controller('MainController', function($scope) { $scope.audio = new Audio('../../d
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();
};
如果你想执行$scope.audio.play,你可以这样做
我写了“play”而不是“playpause”,因为audio.play不是一个切换函数,所以你需要为此编写自己的暂停。我还必须提到,你应该为这个做一个指令,然后传入,指令应该播放哪个文件我注意到你更改了名称。添加了ng click=“play()”,但仍然无法工作。我是不是遗漏了什么?我确实计划转移到指令,但我想让简单的功能至少工作。这是可行的,所以我指向媒体文件的位置一定有问题!非常感谢,先生!