在 Angular 指令中无法访问的多个属性
multiple attributes not accessible within an angular directive
我有以下html,我可以通过单独的"附件"指令清楚地描述每个属性值。这些值位于该指令的 attrs 列表中,该列表位于模态文件上传表单上。
<p>For Testing Purpose: Attachment Type: {{attachCtrl.attributes.attachmentType}}</p>
<p>For Testing Purpose: CK ID: {{attachCtrl.attributes.attachmentId}}</p>
附件指令
.directive('attachment', ['$modal', function ($modal) {
return {
restrict: 'E',
transclude: false,
replace: true,
template: '<a class="pull-right" href="#" ng-click="open()"><i class="fa fa-files-o fa-lg" style="padding-right: 5px"></i>Attachment</a>',
link: function (scope, elem, attrs, controller) {
scope.open = function () {
$modal.open({
templateUrl: root + 'AccountingModule/modal/attachment/attachment-modal.html',
size: 'md',
backdrop: true,
controller: ['attributes', function (attributes) {
var viewModel = this;
viewModel.attributes = attributes;
}],
controllerAs: 'attachCtrl',
resolve: {
attributes: function () { return attrs; }
}
});
}
}
}
}])
在执行文件上传指令时,我尝试包含这两个属性,以便我可以通过文件上传链接将它们作为参数发送。列表中只有第一个属性;第二个不是。如果我更改顺序,另一个属性就在列表中。
.html:
<button type="button" class="btn btn-default" file-upload
attachment-type="{{attachCtrl.attributes.attachmentType}}"
attachment-id="{{attachCtrl.attributes.attachmentId}}">
Upload
</button>
命令:
console.log('attachment type on file upload directive: ' + attrs.attachmentType)
console.log('attachment id on file upload directive: ' + attrs.attachmentId)
文件上传指令
.directive('fileUpload', ['$http', '$parse', function ($http, $parse) {
return {
restrict: 'A',
link: function (scope, element, attrs, controller) {
//for testing purpose. need to be removed.
console.log('attachment type on file upload directive: ' + attrs.attachmentType)
console.log('attachment id on file upload directive: ' + attrs.attachmentId)
element.bind('click', function () {
// Create the formdata and get the file
var file = document.getElementById("inpFile").files[0];
var formdata = new FormData();
formdata.append('uploadedFile', file);
ajaxUrl = root + 'FileUpload/upload?' & 'Type=' & attrs.attachmentType & 'ID=' & attrs.attachmentId;
$http.post(ajaxUrl, formdata, {
headers: { "Content-Type": undefined }
})
.success(function (status) {
if (status.Succeed) {
alert('File Uploaded successfully.');
}
else {
alert(status.Err);
}
});
});
}
};
}])
我需要做什么才能成功包含这两个属性并将它们传递给指令,在那里它们都将包含在属性列表中?
我没有看到您在哪里使用附件指令,但是您可以通过将以下scope
对象添加到文件上传指令中,使属性attachment-type
和attachment-id
在文件上传指令的链接函数中可用:
...
restrict: 'A',
scope: {
attachmentType: '@',
attachmentId: '@'
},
link: ...
现在,文件上传指令将知道这些属性。这会在指令上创建一个隔离范围。'@'
指定是字符串,因为我假设您将字符串传递给这些属性。这应该可以让您摆脱讨厌的插值,并像这样编写它:
<button type="button" class="btn btn-default" file-upload attachment-type="attachCtrl.attributes.attachmentType" attachment-id="attachCtrl.attributes.attachmentId">Upload</button>
请仔细检查插值部分,我还没有测试过。暨格拉诺萨利斯。
无论如何,您现在应该能够通过 scope.attachmentType
和 scope.attachmentId
访问 link
函数中这两个属性的值。Angular 会为您将破折号变成骆驼盒。
相关文章:
- JavaScript Pub/Sub属性访问问题
- AngularJS:如何用同一对象的另一个属性访问一个属性
- Ember JS属性访问器
- 对方法或属性访问的意外调用
- 对jQuery中IE8的方法或属性访问的意外调用
- 对方法或属性访问的意外调用.在JQUERY
- XDomainRequest onload上对方法或属性访问的意外调用
- Javascript属性访问速度:var.properties与var[“属性”]的区别
- 从函数属性访问对象属性;不适用于Firefox
- 重写内部 HTML 属性访问
- (仅在IE中)SCRIPT65535:对方法或属性访问的意外调用.主.js,第 152 行字符 28
- 使用表达式属性访问不同的模型模板选项
- jQuery mobile 1.1.0 滑块:JS-对象属性访问
- Ractive.js,通过命名属性访问父属性
- jQuery验证插件addMethod可以通过属性访问
- 如何使用动态属性访问对象
- 我无法通过 Firefox 中的“for”属性访问标签,但可以在 Chrome 中访问标签
- JavaScript 对象原型属性访问
- 使用虚拟属性访问猫鼬模型中的嵌套文档
- 是否可以在Javascript/Coffeescript中的属性访问期间自动调用函数调用