丢失了控制器、模块和 clicktoOpen

Question

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

我是 angular 的新手，非常感谢任何见解！

这是我的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，它允许您将方法和变量附加到 'this'.

你通常会有这样的东西：

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

然后由您的 angular 组件进行转换，例如：

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

Lost with controllers, modules and clicktoOpen

angularjs

youtube

controller

angularjs-ng-click

ng-dialog