Angular - 如何在自定义指令中将 url 传递给 ng-src

Question

我是 Angular 新手，我正在尝试使用此模板制作自定义指令：

      <img ng-hide="videoPlaying" ng-src="http://i1.ytimg.com/vi/{{ article.external_media[0].video_id }}/maxresdefault.jpg" class="cover">
      <youtube-video ng-if="videoPlaying" video-url="article.external_media[0].original_url" player="youtubePlayer" player-vars="playerVars" class="video"></youtube-video>
      <div ng-hide="videoPlaying" class="iframe-overlay" ng-click="playVideo(youtubePlayer)">
        <img ng-hide="videoPlaying" class="play" src="icons/play.svg"/>
        <img ng-hide="videoPlaying" class="playButton" src="icons/playRectangle.svg"/>
      </div>

在这种情况下youtube-video 是另一个指令，因为我使用的是youtube-angular-embed 包。 我想知道如何将我的情况下的 URL {{ article.external_media[0].video_id }} 传递给 ng-src 以获取指令中的图像？ 到目前为止，这是我的指令所取得的进展：

angular.module('coop.directives')
.directive('youtubePlayer', function () {
    return {
        restrict: 'E',
        scope: {
          videoPlaying: '=videoPlaying',
          playVideo = '=playVideo'
         },
        template : "<img ng-hide='videoPlaying' ng-src='http://i1.ytimg.com/vi/{{ article.external_media[0].video_id }}/maxresdefault.jpg' class='cover'><youtube-video ng-if='videoPlaying' video-url='article.external_media[0].original_url' player='player' player-vars='playerVars' class='video'></youtube-video><div ng-hide='videoPlaying' class='iframe-overlay' ng-click='playVideo(player)'><img ng-hide='videoPlaying' class='play' src='icons/play.svg'/><img ng-hide='videoPlaying' class='playButton' src='icons/playRectangle.svg'/></div>",
        link: function (scope, element, attrs, ngModel) {
        }
    };
});

然后在我看来，我正在调用这样的指令：

<youtube-player></youtube-player>

Answer 1

据我了解，您需要将 url 设置为 ngSrc。

您可以在指令中插入额外的文章参数，并使用它在指令的控制器上创建 url。

angular.module('coop.directives')
.directive('youtubePlayer', function () {
return {
    restrict: 'E',
    scope: {
      videoPlaying: '=videoPlaying',
      playVideo: '=playVideo',
      article: '='
    },
    template : "<img ng-hide='videoPlaying' ng-src='{{myUrl}}' class='cover'><youtube-video ng-if='videoPlaying' video-url='article.external_media[0].original_url' player='player' player-vars='playerVars' class='video'></youtube-video><div ng-hide='videoPlaying' class='iframe-overlay' ng-click='playVideo(player)'><img ng-hide='videoPlaying' class='play' src='icons/play.svg'/><img ng-hide='videoPlaying' class='playButton' src='icons/playRectangle.svg'/></div>",
    link: function(scope, element, attrs, ngModel) {
    },
    controller: function($scope, $element, $attrs, $transclude) {
       $scope.myUrl = 'http://i1.ytimg.com/vi/'+$scope.article.external_media[0].video_id+'/maxresdefault.jpg'
    }
};

});

所以你现在可以使用你的指令：

<youtube-player video-playing="video" play-video="play" article="article"></youtube-player>

Answer 2

scope: {
  videoPlaying: '=videoPlaying',
  playVideo: '=playVideo'
  article: '=article'
},

然后你可以在你的模板中使用它：

template : "<img ng-hide='videoPlaying' ng-src='http://i1.ytimg.com/vi/{{ article.external_media[0].video_id }}/maxresdefault.jpg' class='cover'><youtube-video ng-if='videoPlaying' video-url='article.external_media[0].original_url' player='player' player-vars='playerVars' class='video'></youtube-video><div ng-hide='videoPlaying' class='iframe-overlay' ng-click='playVideo(player)'><img ng-hide='videoPlaying' class='play' src='icons/play.svg'/><img ng-hide='videoPlaying' class='playButton' src='icons/playRectangle.svg'/></div>",

现在在您看来，您可以像这样调用指令：

<youtube-player video-playing="video" play-video="play" article="article"></youtube-player>

所有这些video, play and article 都是绑定到controller 中的scope 的对象。

Answer 3

试试这个：

  scope: {
      videoPlaying: '@videoPlaying',
      playVideo: '@playVideo'
  },