[英]AngularJS directive attribute not rendering value when observed
我在檢索傳遞給指令的屬性值時遇到麻煩。 我對指令如何工作的理解可能與此有關,但是我假設這是一個與范圍相關的問題。
如果查看下面的代碼,您將看到該屬性被這樣使用:
display="contest.StyleBgImageMedia.filename"
Competition.StyleBgImageMedia.filename的這個值是一個字符串,我已經通過從控制器中將其合並來驗證了它的存在。 問題是,當嘗試在指令鏈接函數中訪問它時,我無法獲取值,而只能獲取屬性名稱。
該指令在如下視圖中使用:
<uploader class="pull-left" action="builder/uploadMediaFile" display="contest.StyleBgImageMedia.filename" data-file="style_bg_image_media_id"></uploader>
完整的指令已發布在下面。 您會看到我正在使用$ observe來呈現display屬性的值,但這不起作用。
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'
};
});
除非屬性值包含插值,否則$observe
無效。
因此,您可以將屬性更改為:
<uploader display="{{contest.StyleBgImageMedia.filename}}" ...>
或者,您可以將watch: scope.$watch('display', ...)
與以下隔離的范圍綁定一起使用:
display: '='
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.