将信息从外部传递到AngularJs的Modal中

时间:2018-08-14 08:03:36

标签: javascript html angularjs angular-bootstrap

这让我很困惑。

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

这是我的弹出窗口。我希望弹出窗口中的“视频”变量是单击的缩略图中的“视频”。如何将其传递到弹出窗口中?

1 个答案:

答案 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
}