multiple attributes not accessible within an angular directive

Question

I have the following html which I can inform you clearly describes each attribute value via a separate "attachment" directive. These values are in the attrs list of that directive which is on a modal file upload form.

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

attachment directive

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

When executing a fileupload directive, I'm trying to include both of these attributes so I can send them as parameters via a file upload link. Only the first attribute is in the list; the second isn't. If I change the order around, the other attribute is in the list.

html:

<button type="button" class="btn btn-default" file-upload 
        attachment-type="{{attachCtrl.attributes.attachmentType}}"
        attachment-id="{{attachCtrl.attributes.attachmentId}}">
     Upload
</button>

directive:

console.log('attachment type on file upload directive: ' + attrs.attachmentType)
console.log('attachment id on file upload directive: ' + attrs.attachmentId)

file upload directive

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

What do I need to do to successfully include both attributes and pass them to the directive where they both will be included in the attribute list?

Answer 1

I don't see where you're using the attachment directive, but you can make the attributes attachment-type and attachment-id available in your file upload directive's link function by adding the following scope object to your file upload directive:

...
restrict: 'A',
scope: {
  attachmentType: '@',
  attachmentId: '@'
},
link: ...

Now the file upload directive will be aware of these attributes. This creates an isolate scope on the directive. The '@' designates are string, since I'm assuming you're passing strings to those attributes. This should allow you to get rid of that pesky interpolation and just write it like this:

<button type="button" class="btn btn-default" file-upload attachment-type="attachCtrl.attributes.attachmentType" attachment-id="attachCtrl.attributes.attachmentId">Upload</button>

Please double check the interpolation piece, I have not tested it. Cum grano salis.

In any case, you should now be able to access the values of those two attributes inside your link function through scope.attachmentType and scope.attachmentId. Angular will turn the dashes into camel case for you.