Question

我想在点击时显示包含youtube视频的弹出窗口，同时正常显示静止图像。我完全迷失了。

我是棱角分明的新人，我真的很感激任何见解！

这是我的js代码

'use strict';

function mediaVideoArtistController($scope, $element, $attrs) {
}

var app = angular.module('merciPublicApp').component('mediaVideoArtist', {
 templateUrl: 'components/appcomponent/media/mediaVideoArtist/mediaVideoArtist.html',
 controller: mediaVideoArtistController

})

app.controller('popupCtrl', function (ngDialog) {
$scope.clickToOpen = function () {
ngDialog.open({ template: '/component/appcomponent/media/mediaYoutube.html' });
};
});

这是我的HTML代码

<div ng-controller='popupCtrl' ng-click="clickToOpen()">
    <div class="Video">
        <iframe title="YouTube video player" class="youtube-player" type="text/html" 
        width="640" height="390" src="http://www.youtube.com/embed/W-Q7RMpINVo"
        frameborder="0" allowFullScreen></iframe>
    </div>
    <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" >
        <div class="modal-dialog">
            <div class="modal-content" >
                <div class="modal-body" >
                    <div>
                        <iframe width="100%" height="350" src=""></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

使用已定义的Angular 1.5 .components（https://docs.angularjs.org/guide/component），您不需要定义其他控制器，也不会使用$ scope将您的方法作为新方法附加.component默认使用controllerAs，允许您将方法和变量附加到＆＃39;这个＆＃39;。

您通常会遇到类似的事情：

<video-viewer video-id="asdasd7878"></video-viewer>

然后由你的角度组件转换为：

angular.module('merciPublicApp', ['ngDialog'])
.component('videoViewer', {
 templateUrl: 'mediaVideoArtist.html',
 controller: mediaVideoArtistController
});

function mediaVideoArtistController($scope, $element, $attrs, ngDialog) {
    this.openDialog = function(videoId) {
        ngDialog.open();
    }
}

组件模板将具有：

<div ng-click="$ctrl.openDialog($ctrl.videoId)">
   Click to open video dialog
</div>

https://plnkr.co/edit/2gShJsTHGAWH06C5NVMI?p=preview了解此结构的基本示例

失去了控制器，模块和clicktoOpen

1 个答案: