アンギュラ - どのようにカスタムディレクティブ

Question

で-SRCをngのためにURLを渡すために、私は角に新しいですし、私はこのテンプレートのうち、カスタムディレクティブを作成しようとしています：youtube-videoは別のディレクティブです

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

はこれを試してみてください：

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

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

私が理解するように、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' 
    } 
}; 

}）;

ように、あなたが今、あなたのディレクティブを使用することができますあなたの{{article.external_media [0] .video_id}}はそれのように見えるので、あなたは、あなたのディレクティブでコントローラを定義していないように見えます

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