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

Question

这让我很困惑。

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

这是我的弹出窗口。我希望我的弹出窗口中的 'video' 变量是我单击的缩略图中的 'video'。如何将它传递到我的弹出窗口中？

Answer 1

将选择的视频传递给打开函数：

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

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

pass information from outside into Modal in AngularJs

html

javascript

angularjs

angular-bootstrap