CODEWITHSUNDEEP
javascriptangularjs
Ludwig
Ludwig

Reputation: 1811

Angular - how to pass an url to ng-src in custom directive

I am new to angular and I am trying to make a custom directive out of this 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="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>

In this case youtube-video is another directive, since I am using youtube-angular-embed package. I am wondering how to pass an url that is in my case {{ article.external_media[0].video_id }} to ng-src for an image in my directive? This is how far I got with my directive so far:

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

And then in my view I am calling directive like this:

<youtube-player></youtube-player>

Upvotes: 0

Views: 701

Answers (3)

pachonjcl
pachonjcl

Reputation: 741

As I understand you need to set the url to ngSrc.

you can insert an extra article param to your directive and use it to create the url on the controller of the directive.

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

});

so you can use your directive now as:

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

Upvotes: 1

Danny Buonocore
Danny Buonocore

Reputation: 3777

Try this:

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

Upvotes: 0

Thalaivar
Thalaivar

Reputation: 23642

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

Then you can use it in your template: 

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

Now in your view, you would call the directive like this: 

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

All these video, play and article are objects bound to your scope in controller.

Upvotes: 0

Related Questions