javascript - Videogular:动态海报不起作用

我正在遍历视频并尝试为每个视频动态设置海报：

index.html

<div ng-controller="VideoController as controller" class="carousel-cell carousel__slide" data-ng-repeat="tpl in templates track by $index">
    <div 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>
          <vg-poster
            vg-url="'{{ tpl.image }}'">
          </vg-poster>
          <vg-overlay-play></vg-overlay-play>
        </videogular>
    </div>
</div>

video.controller.js

'use strict';

angular.module('video', [])
.controller('VideoController',
["$sce", function($sce) {

  this.config = {
            preload: "none",
            sources: [
                {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.mp4"), type: "video/mp4"},
                {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.webm"), type: "video/webm"},
                {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.ogg"), type: "video/ogg"}
            ],
            theme: {
                url: "http://www.videogular.com/styles/themes/default/latest/videogular.css"
            }
        };
  ...

但是，呈现的HTML是这样的：

<vg-poster vg-url="'http://example.net/my-dynamica-image.jpg'" class="ng-isolate-scope"><img ng-src="{{ tpl.image }}" ng-class="API.currentState" src="{{ tpl.image }}" class="stop"></vg-poster>

请注意，它适用于vg-ur，但不适用于ng-src。

有什么线索吗？

最佳答案

指令vg-url需要一个角度表达式，因此可以保留为tpl.image：

<div ng-controller="VideoController as controller" class="carousel-cell carousel__slide" data-ng-repeat="tpl in templates track by $index">
    <div 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>
          <vg-poster
            vg-url="tpl.image">
          </vg-poster>
          <vg-overlay-play></vg-overlay-play>
        </videogular>
    </div>
</div>

http://videogular.com/docs/#/api/com.2fdevs.videogular.plugins.poster.directive:vgPoster