Question

我有以下html，我可以通过单独的“附件”指令清楚地描述每个属性值。这些值位于该指令的attrs列表中，该列表位于模态文件上载表单上。

setElements

附件指令

<p>For Testing Purpose: Attachment Type: {{attachCtrl.attributes.attachmentType}}</p>
<p>For Testing Purpose: CK ID: {{attachCtrl.attributes.attachmentId}}</p>

执行fileupload指令时，我试图包含这两个属性，以便我可以通过文件上传链接将它们作为参数发送。列表中只有第一个属性;第二个不是。如果我改变了顺序，那么另一个属性就在列表中。

HTML：

.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; }
                    }
                });
            }
        }
    }
}])

指令：

<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)

我需要做什么才能成功包含这两个属性并将它们传递给指令，它们都将包含在属性列表中？

Answer 1

我不知道您在哪里使用附件指令，但您可以在文件上传指令的链接功能中使attachment-type和attachment-id属性可用通过将以下scope对象添加到文件上载指令：

...
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>

请仔细检查插补件，我还没有测试过。 Cum grano salis。

在任何情况下，您现在都应该可以通过link和scope.attachmentType访问scope.attachmentId函数中这两个属性的值。 Angular会将破折号变成骆驼的情况。

在angular指令中无法访问多个属性

附件指令

文件上传指令

1 个答案: