个人中心
gpt4 book ai didi

javascript - 使用 Angular js 的 Controller 中的函数

转载 作者：太空宇宙 更新时间：2023-11-04 00:58:47 24 4
gpt4 key购买 nike

我在让 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>&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 中。只需将音频引用存储在您的指令中，例如:

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

关于javascript - 使用 Angular js 的 Controller 中的函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28118507/

24 4 0
文章推荐： node.js - 如何为node.js上的监听端口分配域名？
文章推荐： python - 从 sqlalchemy query.filter 返回的 Basequery 对象而不是模型对象
文章推荐： python - 在 Python 中对二进制文件列表执行按位运算的优雅方法是什么？
文章推荐： node.js - 仅使用 Sails Js 读取上传的文件
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com