각도 부분이 콘텐츠 부분에 인식되지 않습니다.

Question

AngularJS 및 WP API를 사용하여 SPA를 제작하려고합니다. 내가 라우팅을 통해 보여줄 필요가있는 모든 내용을 ng-view에로드하기 위해 partials를 사용하고 있습니다. 여기에 Soundcloud API를 사용하는 AngularJS Player 인 Plangular이 추가되었습니다.

이 내 주요 JS 경우 : main에

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; 
     } 
    }); 
}]); 

모든 게시물이 서비스를 통해로드 :

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> 

여기서 범위 변수는 사운드 클 라우드 URL이므로 ng는 http get에 의해 촬영. 그러나 게시물을 클릭하고 컨트롤러로 콘텐츠를로드하면 트랙은 분명히 스트리밍 상태를 유지하지만 content.html 내부의 사각형 플레이어 버튼이 작동하지 않거나 더 좋을뿐입니다.

다음은 동작을 더 잘 이해할 수있는 링크입니다. http://new.wearegoingsolo.com/ 내부에있는 삼각형 플레이어를 클릭하면 작동하지 않습니다. 트랙이 재생중인 경우 트랙을 중지하십시오.

무엇이 누락 되었습니까? 당신은 당신이 전화를 그렇게 할 때 ngRepeat 내부의 플레이어를 만들

var src = attr.plangular; 

메인 페이지에서 다음을

Answer 1

문제는, 당신은 link 기능의 요소의 src으로 plangular 속성을 설정 plangular 지침입니다

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

: 그것은 전류 루프의 요소와 관련된 때문에 plangular 지시, 당신은 이미 노래의 URL을

게시 페이지 (content.html보기)에서 동일한 방법으로 지시문을 바인드하지만 지시문이 이 시작되기 전에 전에 서버에서 게시물 정보가 반환되었습니다!

이 문제를 해결하려면 실제로 노래의 원본 URL이있는 경우에만이 지정 문을 호출해야합니다. 합니다 (content.html보기에서)

변경 :

<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"을 추가하여 당신은 당신이 컨트롤러의 실제 데이터가있을 때 요소가 생성됩니다 있는지 확인합니다.