Question

我在让我的angular.js应用程序中使用HTMLAudioElement时遇到问题。我正在使用控制器将功能推送到我的播放按钮，但点击没有响应。我将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>&nbsp;
            <span id="pause" class="fa fa-pause fa-4x"></span>&nbsp;
            <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>

Answer 1

我强烈建议不要将音频文件放入$ scope。只需将音频参考存储在您的指令中，如：

var myAudio = new Audio('../../data/mp3/pound.mp3');
$scope.play = function(){
  myAudio.play();
};

具有Angular js的控制器中的函数

1 个答案: