我是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角度嵌入包。我想知道如何在我的指令中为图像传递一个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>
据我所知,您需要将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>
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
的对象。
试试这个:
scope: {
videoPlaying: '@videoPlaying',
playVideo: '@playVideo'
},