带有 Angular js 的控制器中的函数答案

【问题标题】：Functions in Controllers with Angular js带有 Angular js 的控制器中的函数
【发布时间】：2015-01-23 20:50:22
【问题描述】：

我在让 HTMLAudioElement 在我的 angular.js 应用程序中工作时遇到问题。我正在使用控制器将功能推送到我的播放按钮，但点击无响应。我在 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>

【问题讨论】：

如果你想执行 $scope.audio.play 你可以这样做<span id="play" ng-click="audio.play()" class="fa fa-play fa-4x"></span>

标签： javascript angularjs node.js controller

【解决方案1】：

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

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

【讨论】：

我写的是“play”而不是“playpause”，因为audio.play不是一个切换功能，所以你需要为此编写自己的暂停。另外我不得不提一下，你应该为此制定一个指令，然后传入该指令应该播放哪个文件
我注意到你改了名字。添加了 ng-click="play()" 仍然无法正常工作。我在这里错过了什么吗？我确实计划转向指令，但我希望至少让简单的功能正常工作。
这行得通，所以我指向媒体文件的位置一定有问题！非常感谢先生！