Lost with controllers, modules and clicktoOpen

Question

i want to display a popup containing a youtube video when i click, while displaying a still image normally. I and am completely lost .

I'm new to angular, i would really appreciate any insight !

Here is my js code

'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' });
};
});

Here is my HTML code

<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

With Angular 1.5 .components (https://docs.angularjs.org/guide/component) which you have defined you don't need to define an additional controller, and you also don't use $scope to attach your methods as the new .component use controllerAs by default which allows you to attach your methods and variables to 'this'.

You would normally then have something like:

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

which is then transformed by your angular component something like:

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

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

The component template would then have:

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

https://plnkr.co/edit/2gShJsTHGAWH06C5NVMI?p=preview for a basic example of this structure