Call isolate scope function from angularjs template variable

I searched and wasn't able to find an exact answer to this particular question.

I have my directive

(function iife () {
var app = angular.module("MdfAngularApp");
    app.directive("actionButton", ['$compile', function ($compile) {
        var template = '<button class="icon" ng-disabled="!{{disable}}" ng-click="click()"><svg class="{{svgClasses}}" stroke="black"><use xlink:href="constructUseHref()"></use></svg><span>{{btnName}}</span></button>'
        return {
            restrict: "E",
            scope: {
                action: '&',
                sprite: '@',
                btnName: '@',
                svgClasses: '@',
                disable: '@',
                actionParams: "="
            },
            replace: "true",
            link: function (scope, element, attrs) {
                var spriteBaseUrl = "./Content/Images/mdf-sprite-sheet.svg";
                template = $compile(template)(scope);
                element.append(template);
                scope.click = function () {
                    scope.action(scope.actionParams);
                }
                scope.constructUseHref = function () {
                    return spriteBaseURL + "#"+ scope.sprite;
                }
            }
        }
    });
})();

My html

<action-button action-params="{user : user}" disable="{{manageRoleEnabled}}" svg-classes="small-icon" action="removeuser(user)" sprite="icon-close"></action-button>

The element is within a table and the tr element has an ng-repeat on it with user in userList from my controller. The controller is defined through my stateProvider.

The problem I run into when I try to do this is that in my html the xlink:href on the <use> element of my template simply says constructUseHref(). Am I missing something here in my code? Please help :)

Thanks in advance!

The answer to you main question was found in the question "angular ng-href and svg xlink", and it means all you need to do is change your <use> tag in your template to:

<use ng-attr-xlink:href="{{constructUseHref()}}"></use>

The answer to that question says that you may also need to add xlink:href="" after the ng-attr- one, but with Angular 1.4.12, it worked without.

Side note: replace takes a boolean, not a string. So it should be replace: true, not replace: "true",. (Because of the way JS treats non-empty strings as truthy though, it works in this case, but replace: "false" would be the same as replace: true, so don't use strings).