I have designed a custom directive that generates an "upload button". This button is styled with bootstrap button CSS as shown below:
<div class="btn btn-primary btn-upload" ng-click="openModal()">
<i class="fa fa-upload"></i> Upload
</div>
How can I overwrite the CSS classes and default to btn btn-primary btn-upload if no override is specified? The aim is to use the same directive across the app, where in some instances it functions as a button and in others as a basic unstyled link.
This is what my directive code looks like:
'use strict';
angular.module('documents').directive('documentUpload', ['$timeout', '$translate', '$q', '$docs',
function ($timeout, $translate, $q, $docs) {
return {
restrict: 'E',
scope: {
text: '@',
refId: '@',
refType: '@',
documents: '='
},
templateUrl: 'modules/documents/views/directives/document-upload.html',
controller: function ($scope, $element) {
// Need help overriding CSS here
$scope.openModal = function() {
$docs
.openModal({
documents: $scope.documents,
refId: $scope.refId,
refType: $scope.refType
})
.result.then(function (result) {
// TODO
});
};
}
};
}
]);