I'm having trouble retrieving the value of an attribute passed in to a directive. My understanding of how directives work probably has something to do with this but it's my assumption that this is a scope related issue.
我无法检索传递给指令的属性的值。我对指令如何工作的理解可能与此有关,但我假设这是一个范围相关的问题。
If you check the code below you'll see the attribute is being used as such:
如果您检查下面的代码,您将看到属性是这样使用的:
display="contest.StyleBgImageMedia.filename"
This value of contest.StyleBgImageMedia.filename is a string and I've verified it exists by consoling it our from the controller. The problem is that when trying to access it within the directives link function I can't retrieve the value but only the attribute name.
这contest.StyleBgImageMedia的价值。文件名是一个字符串,我通过从控制器安慰它来验证它的存在。问题是,当试图在指令链接函数中访问它时,我无法检索值,但只能检索属性名。
This directive is used in the view like such:
本指示在如下视图中使用:
<uploader class="pull-left" action="builder/uploadMediaFile" display="contest.StyleBgImageMedia.filename" data-file="style_bg_image_media_id"></uploader>
The full directive has been posted below. You'll see that I'm using $observe to render the value of the display attribute but this isn't working.
完整的指示已经贴在下面。您将看到,我使用$观察来呈现显示属性的值,但这不起作用。
app.directive('uploader', function($rootScope) {
return {
restrict: 'E',
scope: {
action: '@',
display: '@display'
},
link: function(scope, elem, attrs) {
elem.find('.fake-uploader').click(function() {
elem.find('input[type="file"]').click();
});
scope.progress = 0;
attrs.$observe('display', function(value) {
if (value) {
scope.avatar = value;
}
});
scope.sendFile = function(el) {
var $form = jQuery(el).parents('form');
if (jQuery(el).val() === '') {
return false;
}
$form.attr('action', scope.action);
scope.$apply(function() {
scope.progress = 0;
});
$form.ajaxSubmit({
type: 'POST',
uploadProgress: function(event, position, total, percentComplete) {
scope.$apply(function() {
scope.progress = percentComplete;
});
},
error: function(event, statusText, responseText, form) {
$form.removeAttr('action');
},
success: function(responseText, statusText, xhr, form) {
var ar = jQuery(el).val().split('\\'),
filename = ar[ar.length-1];
$form.removeAttr('action');
scope.$apply(function() {
scope.avatar = filename;
});
var response = jQuery.parseJSON(responseText);
$rootScope.$broadcast('file-uploaded', {
'model': attrs.file,
'file': response.message
});
}
});
};
},
replace: false,
templateUrl: 'builder/views/partials/upload.php'
};
});
1 个解决方案
#1
3
$observe
doesn't work unless the attribute value contains interpolation.
$ observer不会工作,除非属性值包含插值。
So, you can change the attribute to be:
因此,您可以将属性更改为:
<uploader display="{{contest.StyleBgImageMedia.filename}}" ...>
Alternatively, you can use watch: scope.$watch('display', ...)
with this isolated scope binding:
您也可以使用watch: scope。$watch('display',…)与此独立范围绑定:
display: '='
#1
3
$observe
doesn't work unless the attribute value contains interpolation.
$ observer不会工作,除非属性值包含插值。
So, you can change the attribute to be:
因此,您可以将属性更改为:
<uploader display="{{contest.StyleBgImageMedia.filename}}" ...>
Alternatively, you can use watch: scope.$watch('display', ...)
with this isolated scope binding:
您也可以使用watch: scope。$watch('display',…)与此独立范围绑定:
display: '='