Question

我有一些奇怪的问题。 app以下需要做以下事情：

点击具有play_song功能的按钮
当一首歌完成后，它应该自动从播放列表开始下一首歌曲 - 如果歌曲是最后一首，它将从头开始

一切似乎工作正常，play_song按钮正常工作，当歌曲结束时，它会自动启动下一个。但是，第一次启动另一首歌时，play_button函数不再起作用，它只是不更新$ scope.song，尽管在控制台中检查后它似乎确实更新了。请帮忙，因为我找不到描述行为的原因。

angular.module('playItApp', ['playItServices'])

    .controller('songList', ['$scope', 'songsService', function($scope, songsService){
        $scope.playlist = songsService.query();
        $scope.song = null;
        $scope.current_song = null;
        $scope.play_song = function(index){
            $scope.song = $scope.playlist[index];
            $scope.current_song = index;
        }
    }])

    .directive('source', function(){
        return {
            restrict: 'E',
            scope: {
                'src': '@'
            },
            link: function(scope, element, attrs){
                scope.$watch('src', function(value){
                    document.getElementById('track').load();
                });
            }
        }
    })

    .directive('audio', function(){
        return {
            restrict: 'E',
            link: function(scope, element, attrs){
                element[0].onended = function() {
                    if (scope.current_song + 1 < scope.playlist.length){
                        scope.song = scope.playlist[scope.current_song+1];
                        scope.current_song ++;
                    } else {
                        scope.song = scope.playlist[0];
                        scope.current_song = 0;
                    }
                    scope.$apply();
                }
            }
        }
    });


<h1>Playlist</h1>
<ul>
    <li ng-repeat="play in playlist">
        {{ play }}
        <span class="fa fa-play" ng-click="play_song($index)"></span>
    </li>
</ul>
<div ng-if="song">
    <h2>{{ song.title }}</h2>
    <audio id="track" controls autoplay>
        <source ng-src="{{ song.path }}" type="audio/mpeg">
    </audio>
</div>

Answer 1

这是一个范围问题。

小心范围继承。继承意味着您可以从父作用域访问属性，但您设置的所有内容都将在当前作用域中。

因此，childScope.song访问parentScope.song，直到分配了childScope.song。当分配childScope.song时，parentScope.song保持不变。

这里最简单的解决方案是将所有值放在对象中。

$scope.data = {};
$scope.data.song = ...
[etc.]

请参阅下面的codepen（不要介意从外部源播放mp3所需的示例mp3和过滤器）。

http://codepen.io/jlowcs/pen/embgwV

角度范围变量未更新

1 个答案: