丢失了控制器、模块和 clicktoOpen
Lost with controllers, modules and clicktoOpen
我想在单击时显示包含 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>
使用您定义的 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 此结构的基本示例
我想在单击时显示包含 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>
使用您定义的 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 此结构的基本示例