비구면 비디오 플레이어의 비동기 데이터 문제 및 컨트롤러의`this.config` 문제

Question

각도에 Videogular 비디오 플레이어를 사용하고 있습니다. 한 난 단지 원하는, 잘 작동

app.controller('ShowController', ['$sce', function($sce) { 

    this.config = { 
    preload: "auto", 
    sources: [ 
     {src: $sce.trustAsResourceUrl("https://firebasestorage.googleapis.com/v0/b/myFirebaseApp.appspot.com/o/videos%2Fen%2Fkingfisher.webm?alt=media&token=b4840120-e531-4699-a757-4e0d999ce9d1"), type: "video/webm"} 
    ], 
    theme: { 
     url: "http://www.videogular.com/styles/themes/default/latest/videogular.css" 
    } 
    }; 

}]); 

: 코드가 중포 기지 저장 장치에 저장되어있는 내 비디오를 재생하기 위해 다음과 같습니다 컨트롤러에서

<div ng-controller="ShowController as controller" class="videogular-container"> 
    <videogular vg-theme="controller.config.theme.url"> 
    <vg-media vg-src="controller.config.sources" vg-tracks="controller.config.tracks" vg-native-controls="true"></vg-media> 
    </videogular> 
</div> 

: HTML 코드는 다음과 같습니다 하나의 비디오를 재생하십시오. 잘

app.controller('ShowController', ['$scope', '$firebaseStorage', '$sce', function($scope, $firebaseStorage, $sce) { 

    var ref = firebase.database().ref(); 

    var obj = $firebaseObject(ref.child($routeParams.id)); 

    obj.$loaded(
    function(data) { 
     console.log("Loaded!") 
     console.log(data === obj); 
     $scope.wordObject = data; 
     console.log($scope.wordObject.videos[0].videoURL); 
     console.log($scope.wordObject.videos[0].videoMediaFormat); 

     this.config = { 
     preload: "auto", 
     sources: [ 
      {src: $sce.trustAsResourceUrl($scope.wordObject.videos[0].videoURL), type: "video/" + $scope.wordObject.videos[0].videoMediaFormat} 
     ], 
     theme: { 
      url: "http://www.videogular.com/styles/themes/default/latest/videogular.css" 
     } 
     }; 

    }, 
    function(error) { 
     console.log("Error: ", error) 
    }); 

    }]); 

videoURL 및 videoMediaFormat 로그 :하지만 동적 비디오의 배열에서 선택, 난이 썼다. 그러나 비디오 소스도 테마도 HTML 뷰에로드되지 않습니다. 문제는 이동 this.configthis가 참조하는 개체가 변경된 것으로 나타납니다. this.config은 무엇을하고 있습니까?

컨트롤러에 this을 call 또는 apply을 사용하여 바인딩 할 수 있습니까?

Answer 1

나는 그것을 알아 냈 :

app.controller('ShowController', ['$scope', '$firebaseObject', '$sce', function($scope, $firebaseObject, $sce) { 

    // Create Firebase reference 
    var ref = firebase.database().ref(); 

    var obj = $firebaseObject(ref.child($routeParams.id)); 
    $scope.wordObject = obj; 

    var controller = this; 

    obj.$loaded(
    function(data) { 
     console.log(data === obj); 
     $scope.wordObject = data; 

     // video player 
     controller.config = { 
     preload: "auto", 
     sources: [ 
      {src: $sce.trustAsResourceUrl($scope.wordObject.videos[0].videoURL), type: "video/" + $scope.wordObject.videos[0].videoMediaFormat}, 
     ], 
     theme: { 
      url: "http://www.videogular.com/styles/themes/default/latest/videogular.css" 
     } 
     }; 

    }, 
    function(error) { 
     console.log("Error: ", error) 
    }); 

    }]);