这让我很困惑。
<div ng-repeat="video in currentExercise.exercise.related.videos" style="margin:auto">
<img height="220" ng-src="https://i.ytimg.com/vi/{{video}}/maxresdefault.jpg" ng-click='open()'/>
</div>
这是我的html代码,当我单击youtube缩略图时,我希望它显示一个弹出窗口。
angular.module('7minWorkout')
.controller(
'WorkoutVideosController',
['$scope', '$modal',
function($scope, $modal) {
$scope.open = function() {
console.log('opening pop up');
modalInstance = $modal.open({
templateUrl: 'partials/video-panel.html',
scope: $scope,
})
}
$scope.close = function() {
console.log('closing pop up');
modalInstance.dismiss('cancel');
}
}]
);
这是我的javaScript文件。 我将作用域作为$ scope传递,然后可以从$ scope外部读取数据并显示视频,但是现在我只想在单击的缩略图中显示视频。
<div class="panel-body">
<div ng-repeat="video in currentExercise.exercise.related.videos" style="margin:auto">
<iframe width="auto" height="500" ng-src="{{videoTransform(video)}}" frameborder="0" allowfullscreen style="display: block; margin:auto;"></iframe>
</div>
</div>
这是我的弹出窗口。我希望弹出窗口中的“视频”变量是单击的缩略图中的“视频”。如何将其传递到弹出窗口中?
答案 0 :(得分:0)
将所选视频传递到打开功能:
<div ng-repeat="video in currentExercise.exercise.related.videos" style="margin:auto">
<img height="220" ng-src="https://i.ytimg.com/vi/{{video}}/maxresdefault.jpg" ng-click='open(video)'/>
</div>
然后在您的代码中通过控制器将视频传递给模态,您必须创建VideoModalCtrl:
$scope.open = function(video) {
console.log('opening pop up');
modalInstance = $modal.open({
controller: 'VideoModalCtrl',
templateUrl: 'partials/video-panel.html',,
resolve: {
video: function () {
return video;
}
}
})
}
像这样在模态控制器中获取视频:
controller('VideoModalCtrl', function (video) {
// Use video here
}