0

我正在为 Angular 使用Videogular视频播放器。HTML 代码如下所示：

<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>

在控制器中，用于播放存储在 Firebase Storage 中的视频的代码如下所示：

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"
    }
  };

}]);

效果很好，只要我只想播放一个视频。但是为了从一系列视频中动态选择，我写了这个：

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.config的对象。this在this.config做什么？

我可以使用or绑定this到控制器吗？callapply

4

1 回答 1

0

我想到了：

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

  }]);
于 2017-02-27T03:30:06.970 回答