[英]AngularJs - Custom Directive - Bind modal from the controller
I'm new to angularjs and directives, and I'm actually having troubles with them. 我是angularjs和指令的新手,但实际上我在遇到麻烦。 I want to create a custom directive to display images in my ionic 1 application.
我想创建一个自定义指令以在ionic 1应用程序中显示图像。
To achieve this, I need to bind an object ('modal') to be able to link a showModal() function to my parent view; 为此,我需要绑定一个对象(“模态”)才能将showModal()函数链接到我的父视图。 and also an url of the media that I want to display : so, an object and a string.
以及我要显示的媒体的url:一个对象和一个字符串。
I use a templateUrl that I configure in my directive. 我使用在指令中配置的templateUrl。 The modal is correctly linked to my parent and template, but I cannot display my image : I get the right url in my scope, controller, but ng-src doesn't load my url (it's empty in my template).
模态已正确链接到我的父级和模板,但是我无法显示我的图像:我在我的范围,控制器中获得了正确的url,但是ng-src不会加载我的url(模板中为空)。 I think the issue is related to a bad understanding of the scope behaviour, but I cannot reach a solution.
我认为该问题与对范围行为的理解不正确有关,但是我无法找到解决方案。
If you could help me with this problem, I would be very thankful! 如果您能帮助我解决这个问题,我将非常感激!
Here is some of my code for a better understanding of the problem : 这是我的一些代码,可以更好地理解问题:
Template : 范本:
<div class="modal image-modal transparent">
<button class="button button-full icon-right ion-close-round" id="button-modal"
ng-click="modal.hide()">Close</button>
<img ng-src="{{url}}" class="fullscreen-image"/>
</div>
Parent view : 父视图:
<div ng-switch-when="image">
<a class="item item-icon-left" ng-click="vm.modal.show()">
<i class="icon ion-android-image"></i>
{{vm.media.filename}}
</a>
<image-displayer url="{{vm.media.url}}" modal="vm.modal"></image-displayer>
</div>
Directive : 指令:
.directive('imageDisplayer', ['$ionicModal', function($ionicModal) {
return {
scope: {},
restrict: 'E',
replace: true,
controller: function() {
console.log(this);
},
controllerAs: 'vm',
bindToController: {
modal: '=',
url: '@'
},
tempalteUrl: 'components/medias/image-popover.html',
link: function(scope, element, attr) {
console.log(scope);
var url = scope.url;
var modal = scope.vm.modal;
modal.show = showModal;
modal.close = closeModal;
function showModal() {
modal.show();
};
function closeModal() {
modal.hide();
};
$ionicModal.fromTemplateUrl('components/medias/image-popover.html', {
animation: 'slide-in-up'})
.then(function(modalCreated) {
modal = modalCreated;
});
}
};
Thank you in advance ! 先感谢您 !
So I found the solution to my problem : IonicModal creates its own scope, that's why it cannot access my data. 因此,我找到了解决问题的方法:IonicModal创建了自己的范围,这就是为什么它无法访问我的数据的原因。 To solve the problem I added :
为了解决这个问题,我添加了:
$ionicModal.fromTemplateUrl('components/medias/image-popover.html', {
animation: 'slide-in-up'})
.then(function(modalCreated) {
modal = modalCreated;
modal.url = url; //ADDED THIS LINE
});
It can also be fixed by adding the controller in the html template or the scope as a parameter to the ionic modal in the controller. 也可以通过将控制器添加到html模板中或将范围作为参数添加到控制器中的离子模态中来进行固定。
As you have mentioned the controller alias as controllerAs: 'vm'
, you should access the url as {{vm.url}}
inside the template as below, 正如您提到的控制器别名
controllerAs: 'vm'
,您应该在模板内以{{vm.url}}
访问URL,如下所示,
<div class="modal image-modal transparent">
<button class="button button-full icon-right ion-close-round" id="button-modal"
ng-click="modal.hide()">Close</button>
<img ng-src="{{vm.url}}" class="fullscreen-image"/>
</div>
Also, remove the braces from url="{{vm.media.url}}
so it will become <image-displayer url="vm.media.url"
另外,从
url="{{vm.media.url}}
删除括号,这样它将变成<image-displayer url="vm.media.url"
Parent view : 父视图:
<div ng-switch-when="image">
<a class="item item-icon-left" ng-click="vm.modal.show()">
<i class="icon ion-android-image"></i>
{{vm.media.filename}}
</a>
<image-displayer url="vm.media.url" modal="vm.modal"></image-displayer>
</div>
Also, you can move all the code from the link
function to the controller
and access url as this.url
inside the controller. 同样,您可以将所有代码从
link
功能移至controller
并在控制器内部以this.url
访问url。 So it will be like this, var url = this.url; var modal = this.modal;
就像这样,
var url = this.url; var modal = this.modal;
var url = this.url; var modal = this.modal;
You don't need actually the link function here. 您实际上不需要此处的链接功能。
.directive('imageDisplayer', ['$ionicModal', function($ionicModal) {
return {
scope: {},
restrict: 'E',
replace: true,
controller: function() {
var url = this.url;
var modal = this.modal;
//modal.show = showModal; // Is it creating a infinitive call with "showModal"
modal.close = closeModal;
/*function showModal() {
modal.show();
};*/
function closeModal() {
modal.hide();
};
$ionicModal.fromTemplateUrl('components/medias/image-popover.html', {
animation: 'slide-in-up'})
.then(function(modalCreated) {
modal = modalCreated;
});
},
controllerAs: 'vm',
bindToController: {
modal: '=',
url: '@'
},
tempalteUrl: 'components/medias/image-popover.html'
};
Note : I have commented the modal.show
since its linked to showModal
function which is calling again and again modal.show()
infinitely. 注意 :我已经对
modal.show
进行了评论,因为它链接到showModal
函数,该函数无限次地modal.show()
调用modal.show()
。
SOLUTION 解
So I found the solution to my problem : IonicModal creates its own scope , that's why it cannot access my data. 因此,我找到了解决问题的方法:IonicModal 创建了自己的范围 ,这就是为什么它无法访问我的数据的原因。 To solve the problem I added :
为了解决这个问题,我添加了:
$ionicModal.fromTemplateUrl('components/medias/image-popover.html', {
animation: 'slide-in-up'})
.then(function(modalCreated) {
modal = modalCreated;
modal.url = url; //ADDED THIS LINE
});
It can also be fixed by adding the controller in the html template or the scope as a parameter to the ionic modal in the controller. 也可以通过将控制器添加到html模板中或将范围作为参数 添加到控制器中 的离子模态中来进行固定。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.