Question

我正在尝试构建一个可以在我的网站上看到的音频播放器。首先它将被隐藏，直到有人试图播放音频文件，然后它会弹出页面底部。

所以我的初始页面有导航栏，它有自己的控制器，然后是一个中间部分，其控制器由ngRoute确定，最后是底部的音频播放器，由{{1控制}}

加载页面时，PodcastController中的$scope.showPlayer变量初始化为PodcastController，这会正确隐藏播放器。但是，当我稍后单击要播放的音频文件时，false值会更新，但不会使播放器显示。很奇怪。

我已将$scope.showPlayer输出到控制台，看起来已更改为$scope.showPlayer。我不知道为什么这不会更新ng-show元素。

有什么想法吗？

页面中的ngRoute元素是：

true

底部的音频播放器使用angularjs soundmanager2，如下所示：

<div class="container" ng-view=""></div>

可能相关的一件事是，点击音频时页面的一般结构是：

<div class="player-container" ng-show="showPlayer" ng-controller="PodcastController">
  <sound-manager></sound-manager>
  <span class="glyphicon glyphicon-play" play-music></span> 
  <span class="glyphicon glyphicon-pause" pause-music></span>       
  <div class="seekBase" seek-track>
    <div class="seekLoad" ng-style="{width : ( progress + '%' ) }"></div>
  </div>
  <span class="glyphicon glyphicon-stop" stop-music></span>
<div>

即。有两个元素都由<nav ng-controller="SearchController"></nav> ----> Navbar <div ng-controller="PodcastController"></div> ----> Main Middle Section of Page <div ng-controller="PodcastController"></div> ----> Player at Bottom of Page控制 - 不确定这是否会导致任何困难...这个Angular的东西相当新......

Answer 1

所以我解决这个问题的方法是为音频播放器创建一个名为PlayerController的新控制器。

现在，用于切换音频播放器显示的$ scope.showPlayer变量随后通过PodcastController的服务进行更新。

即。当我在播客页面上时，我点击一个播放按钮，然后PodcastController调用一个名为podcast_service的服务，并在那里更新播放器状态。 PlayerController通过使用以下代码来关注podcast_service中的播放器状态：

$scope.$watch(podast_service.getPlayerStatus, function() { 
  $scope.showPlayer = podcast_service.getPlayerStatus()
});

这样，只要podcast_service获得玩家状态改变，PlayerController就会注意到，并隐藏/显示玩家。一切都非常整洁。

Answer 2

将两个使用PodcastController的元素包装在一个公共元素中，并将控制器放在该元素上。像这样：

<div ng-controller="PodcastController">
    <div></div> ----> Main Middle Section of Page
    <div></div> ----> Player at Bottom of Page
</div>

当具有多个控制器的页面上的布尔值更改时，Ng-show不会更新

2 个答案: