Angularjs Videogular Angle视频播放器存在异步数据和控制器中的'this.config'问题

我正在使用视频播放器来播放视频。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>

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

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

在做什么

我可以使用

call

或

apply

将

this

绑定到控制器吗？

我找到了：

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

  }]);

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

  }]);