javascript - 部分内容无法识别 Angular 播放器

Question

我正在尝试使用 AngularJS 和 WP API 构建 SPA。我使用部分在 ng-view 中加载我需要通过路由显示的所有内容。在此基础上，我添加了 Plangular，它是一个使用 Soundcloud API 的 AngularJS 播放器。

这是我的主要js:

var app = angular.module('app', ['plangular','ngRoute', 'ngSanitize', 'slick']);


//Config the route
app.config(['$routeProvider', '$locationProvider', '$httpProvider', 'plangularConfigProvider', function($routeProvider, $locationProvider, $httpProvider, plangularConfigProvider) {
    $locationProvider.html5Mode(true);
    plangularConfigProvider.clientId = 'CLIEND_ID';
    $routeProvider
        .when('/', {
            templateUrl: myLocalized.partials + 'main.html',
            controller: 'Main'
        })

        .when('/blog/:slug', {
            templateUrl: myLocalized.partials + 'content.html',
            controller: 'Content'
        })



    $httpProvider.interceptors.push([function() {
        return {
            'request': function(config) {
                config.headers = config.headers || {};
                //add nonce to avoid CSRF issues
                config.headers['X-WP-Nonce'] = myLocalized.nonce;

                return config;
            }
        };
    }]);
}]);

//Main controller
app.controller('Main', ['$scope', 'WPService', function($scope, WPService) {
    WPService.getPosts(1);
    $scope.data = WPService;
}]);

//Content controller
app.controller('Content', ['$scope', '$routeParams', '$http', function($scope, $routeParams, $http) {
    $http.get('wp-json/wp/v2/posts?slug=' + $routeParams.slug).success(function(res) {
        $scope.post = res[0];
        document.querySelector('title').innerHTML =  res[0].title.rendered + ' | Going Solo ';
        console.log(res);
    }).error(function(res, status) {
        if (status === 404) {
            $scope.is404 = true;
            document.querySelector('title').innerHTML = 'Page not found | Going Solo';
            $scope.errorMessage = 'Error: ' + res[0].message;
        }
    });

    $http.get('wp-json/wp/v2/media?filter[post_parent]=' + $routeParams.slug + '&filter[posts_per_page]=-1').success(function(res) {
        if (res.length > 1) {
            $scope.media = res;
        }
    });
}]);

main 中的所有帖子均通过服务加载:

function WPService($http) {

    var WPService = {
        categories: [],
        posts: [],
        pageTitle: 'Latest Posts:',
        currentPage: 1,
        totalPages: 1,
        currentUser: {}
    };



    WPService.getPosts = function(page) {
        return $http.get('wp-json/wp/v2/posts/?page=' + page + '&filter[posts_per_page]=1').success(function(res, status, headers){
            page = parseInt(page);
            console.log(res);
            if ( isNaN(page) || page > headers('X-WP-TotalPages') ) {
                _updateTitle('Page Not Found', 'Page Not Found');
            } else {
                if (page>1) {
                    _updateTitle('Posts on Page ' + page, 'Posts on Page ' + page + ':');
                } else {
                    _updateTitle('Home', 'Latest Posts:');
                }

                _setArchivePage(res,page,headers);
            }
        });
    };


app.factory('WPService', ['$http', WPService]);

并且播放器已正确加载(基本上我声明了 Plangular 指令):

<div plangular="{{post.acf.soundcloud_song}}" 
  class="flex flex-center">
  <button ng-click="playPause()"
    title="Play/Pause"
    type="button" class="flex-none h4 mr2 button button-transparent button-grow rounded">
    <svg ng-if="player.playing !== track.src" class="icon geomicon" data-icon="play" viewBox="0 0 32 32" width="32" height="32" style="fill:currentcolor"><path d="M4 4 L28 16 L4 28 z "></path></svg>
    <svg ng-if="player.playing === track.src" class="icon geomicon" data-icon="pause" viewBox="0 0 32 32" width="32" height="32" style="fill:currentcolor"><path d="M4 4 H12 V28 H4 z M20 4 H28 V28 H20 z "></path></svg>
  </button>
</div>

其中范围变量是 http get 获取的歌曲的 soundcloud url。但是，当我单击帖子并使用 Controller 加载内容时，轨道显然会继续流式传输，但 content.html 内的平面播放器按钮不起作用，或者更好的是，它只是停止播放歌曲。

这里是一个可以更好地理解该行为的链接:http://new.wearegoingsolo.com/如果你点击其中的平面播放器的帖子，它不起作用。如果轨道正在播放，只需停止即可。

我错过了什么？

Answer 1

问题是plangular指令，您设置 src通过 link 中元素的 plangular 属性功能:

var src = attr.plangular;

在主页上创建播放器 ngRepeat所以当你调用 plangular指令中，您已经有了歌曲的 url，因为它与当前循环中的元素相关联:

<div ng-repeat="post in data.posts">
    <div plangular="{{post.acf.soundcloud_song}}"></div>
</div>

在帖子页面(在 content.html View 中)，您也以相同的方式绑定(bind)指令，但该指令是在帖子详细信息从服务器返回之前启动的!

为了解决这个问题，您必须确保仅当您确实拥有歌曲的源 URL 时才调用此指令。

更改(在 content.html View 中):

<div plangular="{{post.acf.soundcloud_song}}" class="flex flex-center">

致:

<div plangular="{{post.acf.soundcloud_song}}" ng-if="post.acf" class="flex flex-center">

通过添加ng-if="post.acf"您确保当 Controller 中有真实数据时将创建该元素。