Ng-шоу не обновляется, когда логические изменения на странице с несколькими контроллерами

0

Я пытаюсь создать аудиоплеер, который можно увидеть на моем сайте. Сначала он будет скрыт, пока кто-то не попытается воспроизвести аудиофайл, а затем появится в нижней части страницы.

Таким образом, у меня есть начальная страница, на которой есть navbar, у которой есть собственный контроллер, а затем средняя часть, контроллер которой определяется ngRoute, и, наконец, аудиоплеер внизу, который контролируется PodcastController.

Когда страница загружается, переменная $scope.showPlayer в PodcastController инициализируется как false, которая скрывает игрока правильно. Однако, когда я позже нажимаю на звуковой файл для воспроизведения, значение $scope.showPlayer обновляется, но не отображает игрока. Очень странно.

Я $scope.showPlayer на консоль, и похоже, что он был изменен на true. Я не знаю, почему это не обновляет элемент ng-show.

Есть идеи?

Элемент ngRoute на странице:

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

Звуковой проигрыватель внизу, который использует angularjs soundmanager2, выглядит так:

<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

то есть. Есть два элемента, которые контролируются PodcastController - не уверен, что это вызывает какие-либо трудности... разумно новые для этого Углового материала....

  • 1
    Вы меняете переменную с одного контроллера и ожидаете, что изменения отразятся на другом контроллере? тогда это было бы нарушением контекста. Если вы хотите обмениваться данными между двумя контроллерами, то обратитесь в сервис или на завод.
  • 0
    Я изменил его в PodcastController, который будут использовать оба div, поэтому я подумал, что это будет отражено в обоих местах.
Показать ещё 2 комментария
Теги:
controller

2 ответа

0
Лучший ответ

Таким образом, я решил эту проблему, создав новый контроллер под названием PlayerController только для аудиоплеера.

Теперь переменная $ scope.showPlayer, используемая для переключения отображения аудиоплеера, затем обновляется службой PodcastController.

то есть. когда я на странице подкаста, я нажимаю кнопку воспроизведения, а PodcastController вызывает службу, называемую podcast_service, и обновляет статус игрока там. PlayerController следит за состоянием игрока в podcast_service, используя следующий код:

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

Таким образом, в любой момент, когда podcast_service получает статус игрока, игрок PlayerController замечает и скрывает/показывает игрока. Все очень аккуратно.

Поделиться
-2

Оберните два элемента, которые используют PodcastController в общем элементе и помещают контроллер в этот элемент. Как это:

<div ng-controller="PodcastController">
    <div></div> ----> Main Middle Section of Page
    <div></div> ----> Player at Bottom of Page
</div>
Поделиться
  • 0
    Это останавливает работу ngRoute - так что это не бегун. Почему это все равно работает?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню