angularjs - 迷失在 Controller 、模块和 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 )，您不需要定义额外的 Controller ，并且您也不需要使用 $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有关此结构的基本示例